क्लिक और ड्रैग/ड्रॉप ईवेंट के बीच अंतर कैसे करें?

Question

मुझे तत्व के साथ समस्या है जो ड्रैग करने योग्य दोनों है और इसमें एक क्लिक ईवेंट भी है।

$('.drag').mousedown(function() { 
    //... 
}); 

$('.class').click(function() { 
    //... 
)}; 

<div class="drag class"></div> 

जब मैं तत्व खींच और छोड़ देता हूं, तो क्लिक ईवेंट भी निकाल दिया जाता है। इसे कैसे रोकें?

Answer 1

इसके अलावा, आप शायद MouseMove और mousedown घटनाओं के साथ कुछ एक साथ क्लिक करें घटना निष्क्रिय करने के लिए कर सकता है । यहाँ एक उदाहरण कोड है:

 var that = this; 
     var btnId = "button_" + this.getId(); 
     var minView = $("<div>", {"id":btnId, style:"position:absolute; top:" 
      + this.options.style.top + ";left:" + this.options.style.left + ";border:1px solid gray;padding:2px"}); 
     minView.html(this.getMinimizedTitle()); 

     minView.click(function expendWidget(event) { 
      $("#" + btnId).remove(); 
      that.element.css({"left":that.options.style.left, "right":that.options.style.right}); 
      that.element.show(); 
     }); 

     minView.draggable(); 
     minView.on("drag", this.handleDrag.bind(this)); 

     this.element.parent().append(minView); 

इस कोड को समस्या पैदा नहीं करता:

 var that = this; 
     var btnId = "button_" + this.getId(); 
     var minView = $("<div>", {"id":btnId, style:"position:absolute; top:" 
      + this.options.style.top + ";left:" + this.options.style.left + ";border:1px solid gray;padding:2px"}); 
     minView.html(this.getMinimizedTitle()); 

     minView.draggable(); 
     minView.on("drag", this.handleDrag.bind(this)); 

     minView.click(function expendWidget(event) { 
      $("#" + btnId).remove(); 
      that.element.css({"left":that.options.style.left, "right":that.options.style.right}); 
      that.element.show(); 
     }); 
     this.element.parent().append(minView); 

Answer 2

आपको मूसडाउन घटना पर प्रचार को रोककर ऐसा करने में सक्षम होना चाहिए।

$('.drag').mousedown(function(event){ 
    event.stopPropagation(); 
}); 

आपको यह सुनिश्चित करना पड़ सकता है कि यह ईवेंट क्लिक ईवेंट से पहले जुड़ा हुआ है।

var dragging = 0; 

$('.drag').mousedown(function() { 
    $(document).mousemove(function(){ 
     dragging = 1; 
    }); 
}); 

$(document).mouseup(function(){ 
    dragging = 0; 
    $(document).unbind('mousemove'); 
}); 

$('.class').click(function() { 
    if (dragging == 0){ 
     // default behaviour goes here 
    } 
    else return false; 
)}; 

Answer 3

मैंने देखा है कि अगर खींचें घटना क्लिक करने के लिए घटना से पहले पंजीकृत किया गया है तो समस्या वर्णित नहीं होगा:

Answer 4

मेरे मामले में चयनित जवाब काम नहीं किया

इस कोड का उल्लेख समस्या पैदा करते हैं।

var dragging = 0; 
    $(document).mousedown(function() { 
     dragging = 0; 
     $(document).mousemove(function(){ 
      dragging = 1; 
     }); 
    }); 

    $('.class').click(function(e) { 
     e.preventDefault(); 
     if (dragging == 0){ 
      alert('it was click'); 
     } 
     else{ 
      alert('it was a drag'); 
     } 
    }); 

Answer 5

यह ठीक है, लेकिन तुम alway याद रखना चाहिए, कि उपयोगकर्ता क्लिक दौरान थोड़ा माउस स्थानांतरित कर सकते हैं और है कि सूचना नहीं: तो यहाँ मेरी समाधान जो ठीक से काम किया (किसी के लिए उपयोगी हो सकता है) है। तो वह सोचता था कि हाय क्लिक किया गया था और आप - वह