文章摘要
这篇文章主要介绍了JavaScript中鼠标事件监听的问题，特别是mouseup事件失效的情况。文章描述了作者在使用表情框功能时遇到的bug，即在按下鼠标并拖动表情框后，即使松开鼠标，表情框仍然可以被拖动。通过进一步研究发现，问题出在CSS样式上：未禁用用户选择（user-select），导致浏览器认为表情框仍然处于可选中状态，从而使mouseup事件失效。
文章总结了以下关键点：
1. **mousedown**用于判断表情框是否可被拖动；
2. **mosemove**用于判断拖动方向并允许拖动；
3. **mouseup**用于判断拖动结束后停止；
4. 通过添加CSS样式`-webkit-user-select: none;`等禁用用户选择，解决了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;
}
.emojiBox {
-webkit-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}
其实mouseup并没有失效，而是你拖动时，鼠标选中了其他的元素，其实的话，鼠标即使松开，浏览器内部还是认为用户在复制文字，鼠标还是按下的状态，所以不会触发mouseup事件。
以上就是JS的鼠标监听：mouseup（鼠标抬起）失效的详细内容，更多关于JS的鼠标监听：mouseup（鼠标抬起）失效的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章:JavaScript鼠标拖动事件监听使用方法以及实例效果演示JavaScript如何实现监听键盘输入和鼠标监点击Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)JS中mouseup事件丢失的原因与解决办法
© 版权声明
文章版权归作者所有，未经允许请勿转载。
