当前位置 : 主页 > 网络编程 > JavaScript >

JS的鼠标监听mouseup鼠标抬起失效原因及解决

来源:互联网 收集:自由互联 发布时间:2023-06-03
目录 一、起因及解决 解决: 总结: 一、起因及解决 由于很少使用除了click的监听事件,今天在使用mouseup时遇到一个坑,找了好久的bug。事情是这样的,我在写一个表情框,为了实现
目录
  • 一、起因及解决
  • 解决:
  • 总结:

一、起因及解决

由于很少使用除了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(鼠标抬起)失效的资料请关注易盾网络其它相关文章!

上一篇:vue项目打包部署跨域的实现步骤
下一篇:没有了
网友评论