
如题,就以chrome为代表举例说明遇到mousemove的问题。
为body分别绑定onmousedown、onmousemove、onmouseup,并为触发时打印至控制台。代码如下(同学不要忘记body要全屏,并在body上执行操作):
var body = document.body; body.onmousedown = function() {
console.log('down');
} body.onmousemove = function(e) {
console.log('move');
} body.onmouseup = function() {
console.log('up');
}
先将鼠标移至body区内,刷页面,单击一次body,会发现依次打印了down、up、move,由此可断定是于up后执行的move。我们知道一般我们执行一次点击过程的顺序为:onmousedown、onmousemove、onmouseup、click,而在chrome中却在onmouseup后执行了一次onmousemove,此bug说不清是否有意而为之,但对于开发来说是没有必要的,因此我们就要避免此问题的出现,以免莫名多执行了一次onmousemove。
解决方法不高级,也就是判断是否真的移动了,从而判断是否执行onmousemove触发的函数。
var body = document.body,
obj = {}; body.onmousedown = function(e) {
console.log('down');
} body.onmousemove = function(e) {
if (e.pageX === obj.x && e.pageY === obj.y) {
return false;
}
console.log('move');
} // 前面说过是在onmouseup后执行onmousemove,因此在这更改x,y更合理
body.onmouseup = function(e) {
obj.x = e.pageX;
obj.y = e.pageY;
console.log('up');
}
会发现,onmousemove恢复正常。单击依次打印:down、up。
问题就此解决。