jQuery中如何完美解决Chrome下的mousemove事件bug？

在Chrome下有一个关于mousemove的bug是：
1.在触发mouseup事件时，包括在触发click和contextmenu时，也会触发mousemove事件；
2.更诡异的是，当你连续的触发contextmenu事件时，mousedown事件会被mousemove代替，
目前我想到的一个解决方案，通过时间戳比较：

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");    
    }
})

登录后复制

这样能避免在触发click事件，或者触发鼠标左键mouseup引起的mousemove，但是对于上面描述的contextmenu引起的mousemove还是不能很好解决

请问有什么完美的解决办法吗？还是只能尽可能避免这种情况

<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，太费资源。

可以通过比较mousedown的位置来确认是否是move操作

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事件bug？的详细内容，更多请关注Work网其它相关文章！