相互獨特的拖放圖事件

我有一個包含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)

來源

2017-10-04 SMzgr356

我無法重現純JS這個問題：在拖動事件之後http://jsfiddle.net/kkulig/z5y4b67e/你能提供一些這方面的工作現場演示問題？ –

得到它複製：[http://jsfiddle.net/m5wnnnm5/1/](http://jsfiddle.net/m5wnnnm5/1/）。拖動該點時，請在釋放鼠標之前暫停一下。它似乎與散點有關，並且具有可拖動的點。另外，在最初的文章中修復了R-Shiny代碼。它現在將運行，並且問題仍然存在。 – SMzgr356

這個例子可以幫助你：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'); 
      } 
     } 
     } 
    } 
    },

來源

2018-02-05 19:56:03

因爲我使用'highcharter'，所以我必須弄清楚如何將JSFiddle的核心代碼修改加載到R.有一些寫在[[eg]]上（https://stackoverflow.com/questions/47998499 /如何做 - 修改 - highcharter-htmlwidget代碼）。我試圖快速實施解決方案，但它不是一個簡單的剪切和粘貼修復。一旦我弄清楚如何讓核心JS代碼修改和'highcharter'發揮出色，我會將其標記爲已回答。 – SMzgr356

獲取修改後的JS代碼以加載而不會出現錯誤，因爲修改後的文件在Web Inspector窗口中可見並且註冊爲GET成功。 Shiny應用中的「highcharter」圖也呈現。但是，拖動之後，點擊操作仍然會觸發。將在接下來的幾天/幾周內排除更多故障。 – SMzgr356

相互獨特的拖放圖事件

回答

相關問題