互斥的拖放图形事件

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