>웹 프론트엔드 >JS 튜토리얼 >jQuery의 Chrome에서 mousemove 이벤트 버그를 완벽하게 해결하는 방법은 무엇입니까?

jQuery의 Chrome에서 mousemove 이벤트 버그를 완벽하게 해결하는 방법은 무엇입니까?

黄舟
黄舟원래의
2017-06-28 10:41:042950검색

Chrome에는 mousemove에 대한 버그가 있습니다.
1. 클릭 및 컨텍스트 메뉴가 트리거될 때를 포함하여 mouseup 이벤트가 트리거되면 mousemove 이벤트도 트리거됩니다.
2.
현재 제가 생각하는 해결책은 timestamp를 통해 비교하는 것입니다.

var body = document.querySelector("h1");
var timeStamp;

body.addEventListener("mousedown", function (e) {
    console.log("mouse down");
}, false);

body.addEventListener("mouseup", function (e) {
    console.log("mouse up");
    timeStamp = e.timeStamp;
})

body.addEventListener("mousemove", function (e) {
    if (!timeStamp || ( e.timeStamp - timeStamp > 10)) {
        console.log("mouse move");    
    }
})

이렇게 하면 클릭 이벤트가 발생하거나 다음으로 인한 mousemove가 발생하는 것을 방지할 수 있습니다. 마우스 왼쪽 버튼을 mouseup했는데 위에서 설명한 컨텍스트 메뉴로 인한 마우스 이동이 여전히 잘 해결되지 않습니다

완벽한 해결책이 있을까요? 아니면 이 상황을 최대한 피할 수 밖에 없습니다

<input type="text" id="a1" />

$("#a1").mousemove(function(){
	if ($(this).data("x") === event.pageX && $(this).data("y") === event.pageY) {
		return false;
	}
	$(this).data({"x":event.pageX, "y":event.pageY});
	$(this).after("1");
})

jq를 사용한다는 것은 모든 브라우저에서 .data()를 사용한다는 것입니다. 이것이 사고 방식이므로 스스로 바꿀 수 있습니다.

또한 요소가 mousemove에 바인딩된 후에는 다른 이벤트를 바인딩하지 마세요.

마지막으로: mousemove를 사용하지 마십시오. 너무 많은 리소스를 소모합니다.

마우스다운 위치를 비교하면 이동작업인지 확인할 수 있습니다

document.onmousemove = function(e) {  
// 不是move操作  if (x === mouseDown.x && y === mouseDown.y) {
        return false;
    }};
document.onmousedown = function (e) {  
mouseDown = { x: e.clientX, y: e.clientY };};


위 내용은 jQuery의 Chrome에서 mousemove 이벤트 버그를 완벽하게 해결하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.