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（鼠标抬起）失效的资料请关注脚本之家其它相关文章！
相关文章
JavaScript中for-in和for-of的不同之处及如何正确使用
这篇文章主要给大家介绍了关于JavaScript中for-in和for-of的不同之处及如何正确使用它们的相关资料,无论是for...in还是for...of语句都是迭代一些东西,它们之间的主要区别在于它们的迭代方式,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-05-05
2008-04-04
数组去重复是一个常见的需求，我们暂时考虑同类型的数组去重复。主要是理清思路和考虑下性能。以下方法，网上基本都有，这里只是简单地总结一下分享给大家。2015-04-04
本地存储cookie、localStorage和sessionStorage示例详解
cookie、localStorage 和 sessionStorage都是在客户端存储数据的方式，但它们之间有一些区别,下面这篇文章主要给大家介绍了关于JavaScript中cookie、localStorage和sessionStorage的相关资料,需要的朋友可以参考下2024-03-03
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。通过本文给大家介绍Javascript的表单验证长度，需要的朋友参考下吧2016-03-03
在 TypeScript 中，装饰器是一种特殊的声明，可以让你的代码更有趣、更灵活，下面小编就来带大家学习一下TypeScript中装饰器的具体使用吧2023-06-06
这篇文章主要为大家详细介绍了JavaScript实现文件上传与下载功能的相关资料，文中的示例代码讲解详细，具有一定的借鉴价值，感兴趣的小伙伴可以学习一下2023-01-01
本文主要介绍了JS实现复制内容到剪贴板功能的步骤方法，可兼容所有PC浏览器，不兼容手机端。具有一定的参考价值，下面跟着小编一起来看下吧2017-02-02
这篇文章主要介绍了原生JS简单实现ajax的方法,结合实例形式分析了ajax的实现步骤与相关使用技巧,需要的朋友可以参考下2016-11-11
实现键盘操作实现div的移动，最关键的一点：获取div对象，下面有个不错的示例，大家可以参考下2014-06-06
最新评论