在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?的詳細內容。更多資訊請關注PHP中文網其他相關文章!