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自动触发问题及解决方法的更多相关文章
- jQuery EasyUI动态添加控件或者ajax加载页面后不能自动渲染问题的解决方法
博客分类: jquery-easyui jQueryAjax框架HTML 现象: AJAX返回的html无法做到自动渲染为EasyUI的样式.比如:class="easyui-layout ...
- macOS Catalina 10.15版本下anaconda安装后navigator无法正常打开的解决方法
我最近用闲置的money购置了一个ipad,想利用ipad作为mac的复屏,但是这需要将macos升级到catalina才能支持这个功能,但是catalina的更新会导致很多软件都发生无法启动或一些奇 ...
- [ci] 基于1 上文实现拉取代码后能自动触发sonar-runner实现代码扫描评测,job1完成
基于1 上文实现拉取代码后能自动触发sonar-runner实现代码扫描评测,job1完成 添加sonar插件 SonarQube Plugin 配置: 系统设置à告知jenkins,sona ...
- Android 打开方式选定后默认了改不回来?解决方法(三星s7为例)
Android 打开方式选定后默认了改不回来?解决方法(三星s7为例) 刚刚在测试东西,打开一个gif图,然后我故意选择用支付宝打开,然后...支付宝当然不支持,我觉得第二次打开它应该还会问我,没想到 ...
- python2在安装pywin32后出现ImportError: DLL load failed 解决方法
python2在安装pywin32后出现ImportError: DLL load failed 解决方法 在python2中有时候会出现: import win32api ImportError ...
- Mac下新安装的MySQL无法登陆root用户解决方法
一 设置MySQL命令行搜索路径 0.苹果->系统偏好设置->最下边点mysql 在弹出页面中 启动mysql服务 1.打开终端,输入: sudo vi ~/.bash_profile ...
- win7系统下重启之后打印机服务就会自动停止的解决方法
win7系统下重启之后打印机服务就会自动停止的解决方法: 第一步.进入Win7系统后,您需要启动win7系统的任务管理器窗口,然后切换到进程这一栏中,将spoolsv.exe运行进程结束掉.之后,您同 ...
- Win10电脑经常自动掉线、自动断网的解决方法
近期一客户称自己使用电脑上网的时候,过一段时间莫名其妙的出现自动掉线.自动断网的情况,那么遇到这个问题该怎么办?下面装机之家分享一下Win10电脑经常自动掉线.自动断网的解决方法,以Win7系统为例. ...
- 解决Jupyter notebook安装后不自动跳转网页的方法
在安装完Jupyter notebook后,有童鞋说出现了各种不友好的问题,鉴于此情况,个人先随手写出以下三种情况,并给出解决方法: 题外建议:请使用谷歌浏览器为默认浏览器 一.对于弹不出浏览器的解决 ...
随机推荐
- ViewGroup可实现上下、各地跑马灯效果滚动
先上效果图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGFuZ25lbmd3dQ==/font/5a6L5L2T/fontsize/400/fill ...
- hdu 4870 Rating(可能性DP&高数消除)
Rating Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) Total Su ...
- springMvc的注解注入方式
springMvc的注解注入方式 最近在看springMvc的源码,看到了该框架的注入注解的部分觉的有点吃力,可能还是对注解的方面的知识还认识的不够深刻,所以特意去学习注解方面的知识.由于本人也是抱着 ...
- android模拟器与PC的端口映射(转)
阅读目录 一.概述 二.实现步骤 回到顶部 一.概述 Android系统为实现通信将PC电脑IP设置为10.0.2.2,自身设置为127.0.0.1,而PC并没有为Android模拟器系统指定IP,所 ...
- 集成 NHibernate
ABP 基础设施层——集成 NHibernate 本文翻译自ABP的官方教程<NHibernate Integration>,地址为:http://aspnetboilerplate.co ...
- Hibernate各保存方法之间的差 (save,persist,update,saveOrUpdte,merge,flush,lock)等一下
hibernate保存 hibernate要保存的目的是提供一个方法,多.它们之间有许多不同之处,点击此处详细说明.使得差: 一.预赛: 在所有.阐释.供hibernate,,transient.p ...
- 1.cocos2dx存储卡的游戏代码、而游戏移植到“华为荣耀”电话、问题的总结移植
1记忆卡片游戏代码 CardItem.h #pragmaonce #ifndef__CardItem_H__ #define__CardItem_H__ #include"cocos2 ...
- 基于 Android 的 3D 视频样本代码
作者:Mark Liu 下载样本代码 简单介绍 在Android 中,创建一个可以播放视频剪辑的应用很easy:创建一个採用 3D 图形平面的游戏应用也很easy.可是,创建一个可以在 3D 图形对象 ...
- No bean named 'sessionFactory' is defined
1.错误叙述性说明 严重:Servlet service() for servlet default threw exception . org.springframework.beans.facto ...
- 多维算法思考(三):AB组合问题
多维算法思考(三):AB组合问题 题目:x个A,y个B可以组合成多少个不同排列的问题. 首先,我们用数学的方式思考,这个问题属于<组合数学>的问题,我们的第一种方法可以用组合思路来求解. ...