关于javascript: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 事件。