클릭 및 드래그/드롭 이벤트를 구분하는 방법은 무엇입니까?

Question

나는 드래그 할 수있는 요소에 문제가 있으며 click 이벤트도 있습니다.

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

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

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

요소를 드래그 앤 드롭하면 click 이벤트가 실행됩니다. 어떻게 방지 할 수 있습니까?

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

mousedown 이벤트에서 전파를 중지하면 그렇게 할 수 있습니다.

$('.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

괜찮아,하지만 당신은 항상 곁에 기억해야 해당 사용자가 클릭하는 동안 약간 마우스를 이동할 수 있습니다, 그 통지를하지 않습니다 그래서 여기에 제대로 일을 내 솔루션 (누군가를 위해 유용 할 수 있습니다)입니다. 그러면 그는 클릭 한 상태에서 너와 끌어 올린 것 같아.