JS中mouseup事件丢失的原因与解决办法


Posted in Javascript onJune 14, 2017

前言

当实现类似Excel选中区域的功能时,经常出现 mouseup 事件丢失的情况,由于缺少了 mouseup 事件,导致一个完整的操作无法进行。

如果你是想进行拖拽移动操作,也可以参考本文。

原因

目前发现两个原因:

  • 触发了浏览器的 drag 操作,导致mouseup丢失。
  • 由于鼠标离开了操作的区域,触发了mouseleave导致mouseup丢失。

解决办法

第一种情况

通过执行下面的代码阻止系统默认的操作来防止触发 drag 操作:

//在事件中
e=e || window.event;
pauseEvent(e);

//阻止事件冒泡
//不仅仅要stopPropagation,还要preventDefault
function pauseEvent(e){
 if(e.stopPropagation) e.stopPropagation();
 if(e.preventDefault) e.preventDefault();
 e.cancelBubble=true;
 e.returnValue=false;
 return false;
}

通过对事件调用pauseEvent方法可以防止出现drag操作,因此在区域内可以避免mouseup丢失。即使你想实现的本来就是 drag 操作,也可以通过创建跟随鼠标移动的dom元素实现效果。

第二种情况

由于鼠标移到了区域外,触发了 mouseleave 操作,因此在这种情况下要监听 mouseleave 操作,当触发该操作时可以停止或者还原状态。

特别注意的地方

当处理鼠标事件时,可以还要考虑是否要控制按下那个键时才允许操作。

Mouse事件中有一个 buttons 属性,该值标示鼠标按下了一个或者多个按键,如果按下的键为多个,值则为多个:

      0 : 没有按键或者是没有初始化

      1 : 鼠标左键

      2 : 鼠标右键

      4 : 鼠标滚轮或者是中键

      8 : 第四按键 (通常是“浏览器后退”按键)

      16 : 第五按键 (通常是“浏览器前进”)

多个值的时候,相当于进行|操作,即鼠标左右键同时按下时1|2=3。判断是否按下左键可以用value&1!=0进行,例如左右键同时按下时3&1!=0是true,说明按下了左键。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Jquery实现简单的动画效果代码
Mar 18 Javascript
JavaScript实现x秒后自动跳转到一个页面
Jan 03 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
jQuery中addClass()方法用法实例
Jan 05 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
Aug 10 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
Aug 31 Javascript
jQuery Timelinr实现垂直水平时间轴插件(附源码下载)
Feb 16 Javascript
javascript定时器取消定时器及优化方法
Jul 08 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
微信小程序实现拍照画布指定区域生成图片
Jul 18 Javascript
JavaScript Window窗口对象属性和使用方法
Jan 19 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
Vue2.0 从零开始_环境搭建操作步骤
Jun 14 #Javascript
jQuery.form.js的使用详解
Jun 14 #jQuery
ExtJs异步无法向外传值和赋值的完美解决办法
Jun 14 #Javascript
详解Vue爬坑之vuex初识
Jun 14 #Javascript
详解vue2.0的Element UI的表格table列时间戳格式化
Jun 13 #Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 #Javascript
vue时间格式化实例代码
Jun 13 #Javascript
You might like
PHP无敌近乎加密方式!
2010/07/17 PHP
php使用fputcsv实现大数据的导出操作详解
2020/02/27 PHP
jquery 简单的进度条实现代码
2010/03/11 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
JS写的贪吃蛇游戏(个人练习)
2013/07/08 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
2015/09/07 Javascript
JS实现的论坛Ajax打分效果完整实例
2015/10/31 Javascript
jQuery拖拽排序插件制作拖拽排序效果(附源码下载)
2016/02/23 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
JS 实现随机验证码功能
2017/02/15 Javascript
js实现五星评价功能
2017/03/08 Javascript
详解vue嵌套路由-query传递参数
2017/05/23 Javascript
Angular.js初始化之ng-app的自动绑定与手动绑定详解
2017/07/31 Javascript
Angular 封装并发布组件的方法示例
2018/04/19 Javascript
js获取form表单中name属性的值
2019/02/27 Javascript
nodejs中各种加密算法的实现详解
2019/07/11 NodeJs
vue动态设置页面title的方法实例
2020/08/23 Javascript
python登录豆瓣并发帖的方法
2015/07/08 Python
Python自定义主从分布式架构实例分析
2016/09/19 Python
python进阶_浅谈面向对象进阶
2017/08/17 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
Python从零开始创建区块链
2018/03/06 Python
python opencv3实现人脸识别(windows)
2018/05/25 Python
python实现两个一维列表合并成一个二维列表
2019/12/02 Python
pandas 对group进行聚合的例子
2019/12/27 Python
阿迪达斯丹麦官网:adidas丹麦
2016/10/01 全球购物
彼得罗夫美国官网:Peter Thomas Roth美国(青瓜面膜)
2017/11/05 全球购物
MATCHESFASHION.COM美国官网:英国奢侈品零售商
2018/10/29 全球购物
竞选班长演讲稿
2013/12/30 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
检察院起诉意见书
2015/05/20 职场文书
小学教师见习总结
2015/06/23 职场文书
高二数学教学反思
2016/02/18 职场文书
什么是执行力?9个故事告诉您:成功绝非偶然!
2019/07/05 职场文书