D3鼠標事件 - 點擊＆DragEnd

Question

在D3，如果你定義的拖動功能是這樣的：

var drag = d3.behavior.drag() 
     .on("drag", function() {alert("drag")}) 
     .on("dragend", function() {alert("dragEnd")}); 

你真的不能做到以下幾點：

d3.select("#text1") 
.on("click", function(d,i) {alert("clicked")}) 
.call(drag); 

原因是，點擊會在那之後，「dragend」將會被解僱。在我看來，應該有一個單獨的事件進行點擊，因爲我發現dragend和click之間存在巨大差異。

要區分SVG元素中拖動事件的點擊和結束，解決方案是什麼？

Answer 1

The documentation有一些這方面的明確的例子：

登記時在拖動的元素自己的點擊監聽器，您可以查看點擊事件是否被壓制如下：

selection.on("click", function() { 
    if (d3.event.defaultPrevented) return; // click suppressed 
    console.log("clicked!"); 
}); 

這以及緊接着的stopPropagation()示例，允許您控制哪些事件被觸發和處理。

要清楚，區分拖動結束和點擊事件完全取決於您。最簡單的方法是在發生拖動時設置一個標誌，並使用該標誌確定是否應該處理dragend或click事件。

Answer 2

由於4.9.0有.clickDistance()，您可以控制哪個距離從哪裏開始拖動，您將不會得到click事件。

注意，如果你釋放按鈕，之前從DOM元素，你可能會得到任何click事件在所有（例如，通過在drag處理程序使用.raise()）。