Rumah  >  Artikel  >  hujung hadapan web  >  jQuery中如何完美解决Chrome下的mousemove事件bug?

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

黄舟
黄舟asal
2017-06-28 10:41:042860semak imbas

在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 };};


Atas ialah kandungan terperinci jQuery中如何完美解决Chrome下的mousemove事件bug?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn