JS的鼠标监听mouseup鼠标抬起失效原因及解决
更新时间：2023年05月15日 10:26:22 作者：hmy666
这篇文章主要为大家介绍了JS的鼠标监听mouseup鼠标抬起失效原因及解决示例，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
一、起因及解决
由于很少使用除了click的监听事件，今天在使用mouseup时遇到一个坑，找了好久的bug。事情是这样的，我在写一个表情框，为了实现鼠标拖动表情框时，移动到相应的位置。所以配合使用到了mousedown和mouseup和mosemove。
1.mosedown: 用于鼠标按下进行选中该表情区域为可拖动；
2.mosemove：鼠标移动时，判断表情区域是否可拖动，，若可拖动，则开始允许拖动；
3.mouseup: 鼠标抬起该表情区域不可拖动；
但是我遇到的问题是，鼠标按下时，该表情区域可以拖动，但是鼠标松开时，表情区域还是可以根据我的鼠标位置进行拖动。
如下：
![上传中...]()
可以看到，我鼠标松开时，本来不可以移动的，但是现在却可以移动，后来研究了一下，发现表情区域怎么被我选中变色了，然后查了一下使用css禁止选中，就正常了。如下：
解决：
// 表情盒子样式
.emojiBox {
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
总结：
其实mouseup并没有失效，而是你拖动时，鼠标选中了其他的元素，其实的话，鼠标即使松开，浏览器内部还是认为用户在复制文字，鼠标还是按下的状态，所以不会触发mouseup事件。
以上就是JS的鼠标监听：mouseup（鼠标抬起）失效的详细内容，更多关于JS的鼠标监听：mouseup（鼠标抬起）失效的资料请关注脚本之家其它相关文章！
相关文章
这篇文章主要介绍了TypeScript接口，接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。下面我们一起进入文章看看TypeScript接口得具体定义吧,需要的朋友也可以参考一下2021-12-12
在前端JavaScript中,由于安全考虑浏览器不允许直接操作文件系统,但浏览器提供了有限的文件操作能力,这篇文章主要介绍了JavaScript如何在前端代码中读、写本地文件的相关资料,需要的朋友可以参考下2024-09-09
这篇文章主要为大家详细介绍了微信小程序复选框组件使用，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
这篇文章主要介绍了微信小程序 参数传递实例代码的相关资料,需要的朋友可以参考下2017-03-03
JavaScript是单线程的编程语言，只能同一时间内做一件事。但是在遇到异步事件的时候，js线程并没有阻塞，还会继续执行。这是因为JS有事件循环机制，本文就为大家详细讲解一下这一机制，需要的可以参考一下2022-03-03
这篇文章主要介绍了javaScript中this用法,实例分析了javascript中this的用途与相关的使用技巧,需要的朋友可以参考下2015-05-05
BootStrap表单控件之复选框checkbox和单选择按钮radio
这篇文章主要介绍了BootStrap表单控件之复选框checkbox和单选择按钮radio的相关资料,需要的朋友可以参考下2017-05-05
easyui form validate总是返回false的原因及解决方法
下面小编就为大家带来一篇easyui form validate总是返回false的原因及解决方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-11-11
找到了一篇jQuery与Prototype并存的冲突的解决方法
找到了一篇jQuery与Prototype并存的冲突的解决方法...2007-08-08
这篇文章主要给大家介绍了关于blob文件流前端显示pdf的三种方法,困扰我一个晚上的问题,终于解决了,文中给出了详细的代码示例,需要的朋友可以参考下2024-04-04
最新评论