JS中mouseup事件丢失的原因与解决办法 - 行业资讯 - 肥雀云

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

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

<强>目前发现两个原因:

<强>第一种情况

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

　　　　//在事件中　　e=e | | window.event; 　　pauseEvent (e);//阻止事件冒泡//不仅仅要stopPropagation,还要preventDefault 　　函数pauseEvent (e) { 　　如果e.stopPropagation e.stopPropagation (); 　　如果e.preventDefault e.preventDefault (); 　　e.cancelBubble=true; 　　e.returnValue=https://www.yisu.com/zixun/false; 　　返回错误; 　　} 　　　　

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

<强>第二种情况

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

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

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

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

,,,,,1:鼠标左键
　　

,,,,,2:鼠标右键
　　

,,,,,4:鼠标滚轮或者是中键
　　

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

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

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