时间:2021-07-01 10:21:17 帮助过:9人阅读
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?的详细内容,更多请关注Gxl网其它相关文章!