JS的鼠标监听mouseup鼠标抬起失效如何解决

本篇文章和大家了解一下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鼠标抬起失效如何解决的简略介绍，当然详细使用上面的不同还得要大家自己使用过才领会。如果想了解更多，欢迎关注亿速云行业资讯频道哦！