डी 3 माउस घटनाक्रम - क्लिक करें और DragEnd

Question

डी 3 में, अगर आप इस तरह एक खींचें समारोह में परिभाषित किया गया:

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); 

कारण है कि क्लिक करेंगे उसके बाद निकाल दिया जाएगा "खींचें" आग लग जाएगी। मेरी राय में क्लिक करने के लिए एक अलग घटना होनी चाहिए क्योंकि मुझे ड्रैगएंड और क्लिक के बीच एक बड़ा अंतर दिखाई देता है।

एसवीजी तत्व में ड्रैगिंग ईवेंट के क्लिक और अंत के बीच अंतर करने के लिए, समाधान क्या होगा?

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 ईवेंट नहीं मिलेगा।

ध्यान दें कि आप (जैसे drag हैंडलर में .raise() का उपयोग करके) किसी भी click घटना हो सकती है अगर आप बटन के रिलीज से पहले डोम से तत्व को हटा दें।