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，说明按下了左键。
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
相关文章
这篇文章主要介绍了JS仿Windows开机启动Loading进度条的方法,实例分析了javascript操作html元素及对应样式实现特效的技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-02-02
下拉缓冲菜单效果想必大家都有见过吧，在本文使用JS轻松实现下，想学习的朋友可以参考下2013-08-08
这篇文章主要介绍了MUI 上拉刷新/下拉加载功能实例代码，包括一些个人心得，非常不错，具有参考借鉴价值，需要的的朋友参考下吧2017-04-04
Javascript ES6中对象类型Sets的介绍与使用详解
这篇文章主要给大家介绍了关于Javascript ES6中Sets的介绍与使用的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。2017-07-07
矢量图形最大的优点是无论放大、缩小或旋转等不会失真。在地图中存在着大量的应用，是地图数据中非常重要的组成部分，这篇文章主要介绍了OpenLayers 3加载矢量地图源的相关资料,需要的朋友可以参考下2021-12-12
javascript 拷贝节点cloneNode()使用介绍
这篇文章主要介绍了javascript 节点操作拷贝节点cloneNode()的使用,需要的朋友可以参考下2014-04-04
如何在javascript 中使用 xmlHttpRequest 发送 POST
本文将通过不同的示例解释如何使用JavaScript代码在AJAX编程中发送 XMLHttpRequest post 请求，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友参考下吧2023-07-07
这篇文章主要详细介绍了babel是如何将class语法糖转换为es5的语法,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-02-02
JavaScript提供了一个内部数据结构，用来描述对象的属性，控制它的行为，比如该属性是否可写、可遍历等等。这个内部数据结构称为“属性描述对象”。本文主要带大家了解一下JavaScript中你必须了解的属性描述对象，需要的可以参考一下2022-12-12
本文主要介绍了浅谈JavaScript中内存泄漏的几种情况，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
最新评论