如何區分點擊和拖放事件？

Question

我有一個可拖動的元素，也有一個單擊事件的問題。

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

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

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

當我拖放元素時，點擊事件也被觸發。如何防止呢？

Answer 1

而且你很可能做的鼠標移動和鼠標按下事件東西一起禁用Click事件：

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 2

您應該可以通過停止mousedown事件上的傳播來做到這一點。

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

雖然您可能必須確保此事件附加在點擊事件之前。

Answer 3

我注意到，如果拖曳事件之前註冊點擊事件則不會發生所述的問題。下面是一個例子代碼：

此代碼創建提到的問題：

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

這沒關係，但你應該送花兒給人記住，用戶可以點擊期間稍微移動鼠標並沒有注意到這一點。所以他會認爲嗨點擊，你 - 他拖動