.click() 중에 마우스가 움직 였는지 확인하는 방법은 무엇입니까? <a href="http://api.jquery.com/click/" rel="nofollow">.click()</a>에 대한 jQuery를 문서에 따르면

Question

는

이벤트는 이벤트 만이 일련의 후 트리거 : 포인터가 요소 내에있는 동안

• 마우스 버튼이 눌러져.
• 포인터가 요소 안에 있으면 마우스 단추를 놓을 수 있습니다.

문제는 내가 클릭 이벤트를 등록하려는 항목의 그리드에서 "클릭하여 드래그"기능을 사용하고 있다는 것입니다. 즉, 드래그를 클릭 할 때마다 마우스가 항목을 누른 다음 드래그가 발생한 후 동일한 항목에서 해제된다는 의미입니다. 클릭 이벤트가 발생합니다.

마우스를 놓았을 때부터 마우스를 놓을 때까지 마우스가 움직이지 않으면 이벤트를 발생시킬 수있는 방법이 있습니까? jQuery 초급자로서이게 사소한 것처럼 보일 지 모르지만 나는 그저 당황 스럽다.

Answer 1

mousedown과 mouseup 사이의 마우스 위치를 추적하여 마우스 포인터가 움직이는 것을 확인합니다. 당신은 아마 몇 픽셀처럼 모든 방법을 오류의 작은 여백을 추가해야하지만, 아래의 간단한 예는 다음과 같습니다

var left = 0, 
    top = 0;  

$(element).on({ 
    mousedown: function(e) { 
     left = e.pageX; 
     top = e.pageY; 
    }, 
    mouseup: function(e) { 
     if (left != e.pageX || top != e.pageY) { 
      alert(' OMG, it moved ! '); 
     } 
    } 
}); 

Answer 2

당신은 mousedown과 mouseUp 이벤트 트리거가 실행 가능한 대안이라고 생각합니까? mousedown의 좌표가 mouseup의 좌표와 같으면 커서는 클릭하는 동안 위치를 변경하지 않습니다.

Answer 3

아니요, 거의 완전히 쓸모없는 이벤트는 없습니다. 사용자가 의도하지 않더라도 클릭하는 동안 마우스가 약간 움직이는 것이 일반적입니다. 특히 클릭하는 버튼이 마우스 자체에있는 일반 마우스를 사용하면 더욱 그렇습니다.

mousedown 및 mouseup 이벤트에서 마우스 좌표를 가져오고 마우스가 얼마나 멀리 이동했는지에 따라 mouseup 이벤트에 대해 조치를 취하십시오.

Answer 4

@ adeneo의 코드가 조금 수정되었으므로 사용자가 커서를 "조금만"움직이게하고 실제로는 클릭으로 해석해야하는 문제를 해결합니다. 나는 이것을 위해 eucledian distance를 사용했다. 더 나은 성능을 위해 Math.sqrt을 삭제할 수 있지만 radiusLimit 변수를 조정해야합니다.

var left = 0, 
    top = 0, 
    radiusLimit = 5; 

$(element).on({ 
    mousedown: function(event) { 
    left = event.pageX; 
    top = event.pageY; 
    }, 
    mouseup: function(event) { 
    var deltaX = event.pageX - left; 
    var deltaY = event.pageY - top; 
    var euclidean = Math.sqrt(deltaX * deltaX + deltaY * deltaY); 

    if (euclidean < radiusLimit) { 
     console.log("this is a click."); 
    } 
    } 
});