zoukankan      html  css  js  c++  java
  • webkit内核下的mouseup后mousemove自动触发问题及解决方法

    如题,就以chrome为代表举例说明遇到mousemove的问题。

    为body分别绑定onmousedown、onmousemove、onmouseup,并为触发时打印至控制台。代码如下(同学不要忘记body要全屏,并在body上执行操作):

     1 var body = document.body;
     2 
     3 body.onmousedown = function() {
     4     console.log('down');
     5 }
     6 
     7 body.onmousemove = function(e) {
     8     console.log('move');
     9 }
    10 
    11 body.onmouseup = function() {
    12     console.log('up');
    13 } 

    先将鼠标移至body区内,刷页面,单击一次body,会发现依次打印了down、up、move,由此可断定是于up后执行的move。我们知道一般我们执行一次点击过程的顺序为:onmousedown、onmousemove、onmouseup、click,而在chrome中却在onmouseup后执行了一次onmousemove,此bug说不清是否有意而为之,但对于开发来说是没有必要的,因此我们就要避免此问题的出现,以免莫名多执行了一次onmousemove。

    解决方法不高级,也就是判断是否真的移动了,从而判断是否执行onmousemove触发的函数。

     1 var body = document.body,
     2     obj = {};
     3 
     4 body.onmousedown = function(e) {
     5     console.log('down');
     6 }
     7 
     8 body.onmousemove = function(e) {
     9     if (e.pageX === obj.x && e.pageY === obj.y) {
    10         return false;
    11     }
    12     console.log('move');
    13 }
    14 
    15 // 前面说过是在onmouseup后执行onmousemove,因此在这更改x,y更合理
    16 body.onmouseup = function(e) {
    17     obj.x = e.pageX;
    18     obj.y = e.pageY;
    19     console.log('up');
    20 }

    会发现,onmousemove恢复正常。单击依次打印:down、up。

    问题就此解决。

  • 相关阅读:
    General Thread Statesmysql 线程状态大全
    windows 下文件强制删除软件很强大 .
    图解让SQL Server 2000自动备份数据库(转)
    【转载】尼康D90购机指南
    【原创】买房后记
    【转载】安装win7和ubuntu双系统过程
    【续上篇】推荐一款液晶电视测试软件
    【重装系统需要注意及备份事项】
    【数据库】查询插入一列
    将文本导入数据库时产生的问题
  • 原文地址:https://www.cnblogs.com/wuyuchang/p/4305528.html
Copyright © 2011-2022 走看看