Mutually Exclusive Drag/Drop Graph Events - highcharts

Question

I have a Shiny app containing a Highcharter graph. The graph is a scatter, and has draggable and clickable points. The action associated with dragging should, in theory, be mutually exclusive with the action associated with clicking.
However, in practice, the click action sometimes fires when a point's dragged. Clicking only (without a drag) and dragging (which should preclude the ability to click until the mouse button's released and the drag action's completed) need to be mutually exclusive in this app. My full code has different JavaScript actions getting passed back to the Shiny server depending on the event's type. Both the events firing together is causing trouble.
I suspect the solution involves adding additional JavaScript actions associated with each event. My JavaScript skills aren't strong enough to know what those tweaks might be, though. Googling several different variants of this question didn't turn any potential solutions. The closest discussion I found is in the Highcharts context, here, but the solution has to do with the master Highchart/draggable-events JS files.
Suggestions?
For a toy example where you can see this behavior in action:
rm(list=ls())
library(highcharter)
library(shiny)
ui <- fluidPage(
highchartOutput("hcontainer")
)
# MUTUAL EXCLUSIVITY:
# if you drag in the plot, you should either drag (and get no alert) OR
# get an alert (and the point shouldn't/won't move), but never both.
server <- function(input, output, session) {
output$hcontainer <- renderHighchart({
hc <- highchart() %>%
hc_chart(animation = FALSE) %>%
hc_title(text = "draggable points demo") %>%
hc_plotOptions(
series = list(
point = list(
events = list(
drop = JS("function(){ /* # do nothing, for demo */
}"
),
click = JS("function(){
alert('You clicked') /* # give alert, for demo */
}"
)
)
),
stickyTracking = FALSE
),
column = list(
stacking = "normal"
),
line = list(
cursor = "ns-resize"
)
) %>%
hc_tooltip(yDecimals = 2) %>%
hc_add_series(
type = "scatter",
data = stars,
draggableY = TRUE,
draggableX = TRUE,
hcaes(x = absmag, y=radiussun)
)
hc
})
}
shinyApp(ui = ui, server = server)

Answer 1

This example may help you: http://jsfiddle.net/kkulig/th37vnv5/
I added a flag in the core function that prevents from firing the click action right after the drag event:
var dragHappened;
(function(H) {
var addEvent = H.addEvent;
H.Pointer.prototype.setDOMEvents = function() {
var pointer = this,
container = pointer.chart.container,
ownerDoc = container.ownerDocument;
container.onmousedown = function(e) {
dragHappened = false;
pointer.onContainerMouseDown(e);
};
container.onmousemove = function(e) {
pointer.onContainerMouseMove(e);
};
container.onclick = function(e) {
if (!dragHappened) {
pointer.onContainerClick(e);
}
};
(...)
}; // setDOMEvents
})(Highcharts);
(...)
plotOptions: {
series: {
point: {
events: {
drag: function() {
console.log('drag');
dragHappened = true;
},
click: function() {
console.log('click');
}
}
}
}
},