如题,就以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自动触发问题及解决方法的更多相关文章

  1. jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法

    博客分类: jquery-easyui jQueryAjax框架HTML  现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...

  2. macOS Catalina 10.15版本下anaconda安装后navigator无法正常打开的解决方法

    我最近用闲置的money购置了一个ipad,想利用ipad作为mac的复屏,但是这需要将macos升级到catalina才能支持这个功能,但是catalina的更新会导致很多软件都发生无法启动或一些奇 ...

  3. [ci] 基于1 上文实现拉取代码后能自动触发sonar-runner实现代码扫描评测,job1完成

    基于1 上文实现拉取代码后能自动触发sonar-runner实现代码扫描评测,job1完成   添加sonar插件 SonarQube Plugin   配置: 系统设置à告知jenkins,sona ...

  4. Android 打开方式选定后默认了改不回来?解决方法(三星s7为例)

    Android 打开方式选定后默认了改不回来?解决方法(三星s7为例) 刚刚在测试东西,打开一个gif图,然后我故意选择用支付宝打开,然后...支付宝当然不支持,我觉得第二次打开它应该还会问我,没想到 ...

  5. python2在安装pywin32后出现ImportError: DLL load failed 解决方法

    python2在安装pywin32后出现ImportError: DLL load failed 解决方法 在python2中有时候会出现: import win32api   ImportError ...

  6. Mac下新安装的MySQL无法登陆root用户解决方法

      一 设置MySQL命令行搜索路径 0.苹果->系统偏好设置->最下边点mysql 在弹出页面中 启动mysql服务 1.打开终端,输入: sudo vi ~/.bash_profile ...

  7. win7系统下重启之后打印机服务就会自动停止的解决方法

    win7系统下重启之后打印机服务就会自动停止的解决方法: 第一步.进入Win7系统后,您需要启动win7系统的任务管理器窗口,然后切换到进程这一栏中,将spoolsv.exe运行进程结束掉.之后,您同 ...

  8. Win10电脑经常自动掉线、自动断网的解决方法

    近期一客户称自己使用电脑上网的时候,过一段时间莫名其妙的出现自动掉线.自动断网的情况,那么遇到这个问题该怎么办?下面装机之家分享一下Win10电脑经常自动掉线.自动断网的解决方法,以Win7系统为例. ...

  9. 解决Jupyter notebook安装后不自动跳转网页的方法

    在安装完Jupyter notebook后,有童鞋说出现了各种不友好的问题,鉴于此情况,个人先随手写出以下三种情况,并给出解决方法: 题外建议:请使用谷歌浏览器为默认浏览器 一.对于弹不出浏览器的解决 ...

随机推荐

  1. ViewGroup可实现上下、各地跑马灯效果滚动

    先上效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGFuZ25lbmd3dQ==/font/5a6L5L2T/fontsize/400/fill ...

  2. hdu 4870 Rating(可能性DP&高数消除)

    Rating Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Total Su ...

  3. springMvc的注解注入方式

    springMvc的注解注入方式 最近在看springMvc的源码,看到了该框架的注入注解的部分觉的有点吃力,可能还是对注解的方面的知识还认识的不够深刻,所以特意去学习注解方面的知识.由于本人也是抱着 ...

  4. android模拟器与PC的端口映射(转)

    阅读目录 一.概述 二.实现步骤 回到顶部 一.概述 Android系统为实现通信将PC电脑IP设置为10.0.2.2,自身设置为127.0.0.1,而PC并没有为Android模拟器系统指定IP,所 ...

  5. 集成 NHibernate

    ABP 基础设施层——集成 NHibernate 本文翻译自ABP的官方教程<NHibernate Integration>,地址为:http://aspnetboilerplate.co ...

  6. Hibernate各保存方法之间的差 (save,persist,update,saveOrUpdte,merge,flush,lock)等一下

    hibernate保存  hibernate要保存的目的是提供一个方法,多.它们之间有许多不同之处,点击此处详细说明.使得差: 一.预赛: 在所有.阐释.供hibernate,,transient.p ...

  7. 1.cocos2dx存储卡的游戏代码、而游戏移植到“华为荣耀”电话、问题的总结移植

     1记忆卡片游戏代码 CardItem.h #pragmaonce #ifndef__CardItem_H__ #define__CardItem_H__ #include"cocos2 ...

  8. 基于 Android 的 3D 视频样本代码

    作者:Mark Liu 下载样本代码 简单介绍 在Android 中,创建一个可以播放视频剪辑的应用很easy:创建一个採用 3D 图形平面的游戏应用也很easy.可是,创建一个可以在 3D 图形对象 ...

  9. No bean named &#39;sessionFactory&#39; is defined

    1.错误叙述性说明 严重:Servlet service() for servlet default threw exception . org.springframework.beans.facto ...

  10. 多维算法思考(三):AB组合问题

    多维算法思考(三):AB组合问题 题目:x个A,y个B可以组合成多少个不同排列的问题. 首先,我们用数学的方式思考,这个问题属于<组合数学>的问题,我们的第一种方法可以用组合思路来求解. ...