js mouseup丢失问题(不执行)与解决办法

技术钱

已于 2022-11-24 10:09:19 修改

阅读量4.7k

点赞数 5

CC 4.0 BY-SA版权

分类专栏： javascript vue 文章标签： javascript 开发语言 ecmascript

于 2021-07-04 02:09:02 首次发布

本文链接：https://blog.csdn.net/qq_40121308/article/details/118449655

vue 同时被 2 个专栏收录

7 篇文章

订阅专栏

javascript

6 篇文章

订阅专栏

在JavaScript编程中，遇到一个常见问题：当在可视化区域拖动鼠标时，mouseup事件有时不会触发，导致流程中断。为了解决这个问题，可以在document.body上监听mouseup和mousemove事件。在初始化函数init中，分别添加这两个事件的监听器，确保mouseup事件能够正确执行所需代码，从而保证程序的正常流程。

当实现鼠标在可视区域上面进行拖动的时候，经常出现 mouseup 事件丢失的情况，导致正常的流程没法执行。元素执行mousedown 在可视化区域上面拖动一段时候鼠标松开有些时候mouseup不会执行。

解决方法：

mounted() {
  this.init()
},
methods: {
  init() {
  
    document.body.addeventlistener('mouseup', () => {
      // mouseup 需要执行的代码块
      ......
    })
    
    document.body.addeventlistener('mousemove ', () => {
      // mousemove 需要执行的代码块
      ......
    })
    ......
  }
}