webkit内核下的mouseup后mousemove自动触发问题及解决方法

如题，就以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。

问题就此解决。

巴特西

webkit内核下的mouseup后mousemove自动触发问题及解决方法

最新文章

热门文章