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 相关文章推荐
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
js判断是否为数组的函数: isArray()
Oct 30 Javascript
JS读取cookies信息(记录用户名)
Jan 10 Javascript
jQuery 图片切换插件(代码比较少)
May 07 Javascript
Javascript判断文件是否存在(客户端/服务器端)
Sep 16 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 Javascript
JavaScript表格常用操作方法汇总
Apr 15 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
AngularJS实用基础知识_入门必备篇(推荐)
Jul 10 Javascript
详解关于webpack多入口热加载很慢的原因
Apr 24 Javascript
element-ui中按需引入的实现
Dec 25 Javascript
通过滑动翻页效果实现和移动端click事件问题
Jan 26 Javascript
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 数据结构 算法 三元组 Triplet
2011/07/02 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
学习php开源项目的源码指南
2014/12/21 PHP
php使用MySQL保存session会话的方法
2015/06/26 PHP
php入门教程之Zend Studio设置与开发实例
2016/09/09 PHP
javascript 获取元素位置的快速方法 getBoundingClientRect()
2009/11/26 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
2013/07/05 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
JavaScript点击按钮后弹出透明浮动层的方法
2015/05/11 Javascript
JavaScript学习笔记之DOM基础 2.4
2015/08/14 Javascript
IE6兼容透明背景图片及解决方案
2015/08/19 Javascript
jQuery+HTML5美女瀑布流布局实现方法
2015/09/21 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
jQuery使用serialize()表单序列化时出现中文乱码问题的解决办法
2016/07/27 Javascript
JS实现颜色动态淡化效果
2017/03/06 Javascript
EasyUI中的dataGrid的行内编辑
2017/06/22 Javascript
vue cli2.0单页面title修改方法
2018/06/07 Javascript
解决Layui数据表格的宽高问题
2019/09/28 Javascript
webpack常用配置总览(小结)
2019/11/18 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
2020/06/03 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
Python实现简单登录验证
2016/04/13 Python
python使用matplotlib绘图时图例显示问题的解决
2017/04/27 Python
Python批量查询域名是否被注册过
2017/06/21 Python
基于python 凸包问题的解决
2020/04/16 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
python实现b站直播自动发送弹幕功能
2021/02/20 Python
应届毕业生求职信
2013/11/30 职场文书
医药工作岗位求职信分享
2013/12/31 职场文书
《锄禾》教学反思
2014/04/08 职场文书
网站创业计划书
2014/04/30 职场文书
2015年银行客户经理工作总结
2015/04/01 职场文书
2016关于预防职务犯罪的心得体会
2016/01/21 职场文书
写作技巧:优秀文案必备的3种结构
2019/08/19 职场文书
python实现自定义日志的具体方法
2021/05/28 Python