相互独特的拖放图事件

Question

我有一个包含Highcharter图的Shiny应用程序。该图是分散的，并且具有可拖动和可点击的点。与拖动相关的操作在理论上应与与点击相关的操作相互排斥。

但是，在实践中，点击动作有时会在点拖动时触发。单击（没有拖动）和拖动（这应该排除鼠标按钮的释放和拖动操作完成之前的点击能力）需要在此应用程序中相互排斥。我的完整代码根据事件的类型将不同的JavaScript操作传递回Shiny服务器。两起事件共同造成麻烦。

我怀疑该解决方案涉及到添加与每个事件相关的其他JavaScript操作。虽然我的JavaScript技术还不够强大，无法知道这些调整可能会是什么。谷歌搜索这个问题的几个不同的变种没有变成任何可能的解决方案。我发现最接近的讨论是在Highcharts上下文中，here，但解决方案与主Highchart/draggable-events JS文件有关。

对此提出建议？

对于玩具的例子，你可以看到这种行为在行动：

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

这个例子可以帮助你：http://jsfiddle.net/kkulig/th37vnv5/

我在烧制而成的点击动作阻止了核心功能添加了一个标志

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'); 
      } 
     } 
     } 
    } 
    },