JS中mouseup事件丢失的原因与解决办法
前言
当实现类似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，说明按下了左键。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
一直以来都在函数式编程的大门之外徘徊,要入门的话首先得熟悉各种高阶函数,数组的reduce方法就是其中之一,这篇文章主要给大家介绍了关于js利用reduce方法让你的代码更加优雅的相关资料,需要的朋友可以参考下2021-08-08
本篇文章主要介绍了彻底解决webpack打包慢的解决办法汇总，详细的介绍了3种方法，有兴趣的可以了解一下2017-07-07
脚本写的IE右键助手...2006-07-07
今天小编就为大家分享一篇关于JavaScript中的"=、==、==="区别讲解，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧2019-01-01
H5跳转小程序按钮不显示(wx-open-launch-weapp)踩坑指南
这篇文章主要给大家介绍了关于H5跳转小程序按钮不显示(wx-open-launch-weapp)踩坑的相关资料,文中介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2023-02-02
如果JSON对象中有属性是包含双引号当转换成字符串形式，将自动加上反斜线，详细请祥看本文2014-03-03
内建函数其实就是内置函数,reduce函数是ECMAScript5规范中出现的数组方法。在平时的工作中，相信大家使用的场景并不多，这篇文章给大家详细介绍了函数reduce的应用以及多重叠加，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-10-10
这篇文章主要介绍了探究一道价值25k的蚂蚁金服异步串行面试题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-08-08
JS对话框_JS模态对话框showModalDialog用法总结
本篇文章主要是对JS对话框_JS模态对话框showModalDialog的用法进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
经常在做app的时候,会有做热更新的需求,这也是常用的更新app的一种手段,下面这篇文章主要给大家介绍了关于uniApp实现热更新的思路与详细过程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
最新评论