mouseup 左键_javascript中mouseup事件丢失的原因与解决办法

这篇文章主要跟大家介绍了关于Javascript中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，说明按下了左键。

总结

mouseup 左键_javascript中mouseup事件丢失的原因与解决办法相关推荐

Session莫名丢失的原因及解决办法[转载]
Asp.net 默认配置下,Session莫名丢失的原因及解决办法正常操作情况下Session会无故丢失.因为程序是在不停的被操作,排除Session超时的可能.另外,Session超时时间被设定成 ...
Frameset导致Cookies和Session丢失的原因及解决办法
参考资料 1 Frameset导致Cookies和Session丢失的原因及解决办法 http://blog.csdn.net/zl_c/article/details/1742775 2 使用fr ...
微服务架构中的雪崩问题产生原因及解决办法
微服务架构中的雪崩问题产生原因及解决办法参考文章: (1)微服务架构中的雪崩问题产生原因及解决办法 (2)https://www.cnblogs.com/panchanggui/p/10330924 ...
Hyper-V下的Linux虚拟机网卡丢失问题原因及解决办法
Hyper-V下的Linux虚拟机网卡丢失问题原因及解决办法虚拟化大势所趋公司推行了虚拟化,全部用的是Microsoft Windows 2008 R2 Enterprise with Hyper ...
sketch颜色和html颜色不一致,photoshop和sketch中图片色彩不一致的原因和解决办法...
静电说:之前有用户提过类似的问题,他发现在photoshop中图片的色彩和sketch中图片的色彩不一致.下面看看静电翻译的一篇 bohemiancoding团队发表的博文,详细阐述了这种现象产生的原 ...
python中txt文件读取错误原因以及解决办法‘gbk‘ codec can‘t decode byte 0x80 in position 2: illegal multibyte sequence
python的读写文件操作时,有时候会出现一些小问题,详细如下,(原因在前面,解决办法在文末). 读取txt文件时出现错误反馈如下: Traceback (most recent call last) ...
uni-app浏览器、iPhone手机显示轮播图，微信、支付宝小程序中不显示的错误原因及解决办法
源码: index.vue: <template><view class="main"><swiper :indicator-dots="t ...
Python学习中的无效语法常见原因和解决办法分析
Python以其简单的语法而闻名.然而,当您第一次学习Python时,或者当您具有另一种编程语言的坚实背景时,您可能会遇到一些Python不允许的事情.如果您在尝试运行Python代码时收到过Synt ...
SqlServer2000中作业无法删除的原因和解决办法
错误信息描述为:错误14274:无法添加.更新或删除从MSX服务器上发起的作业(或其步骤或调度). 原来以为是应为表之间关联,删除三张记录表,后来发现没有.可能那是2005上会引起的问题. 后查看相关 ...

mouseup 左键_javascript中mouseup事件丢失的原因与解决办法

mouseup 左键_javascript中mouseup事件丢失的原因与解决办法相关推荐

最新文章

热门文章