关于vue dom 上 mouseup 脱离元素无法触发的问题?

Question

Rt

有这样两个 div

左边这里有个 红色的拖拽按钮,可以用来左右拖拽 改变 div 宽度

大致代码是这样的

<div @mousedown="mousedown" ....></div>
mousedown(){
    //可以开始拖拽
    this.resizing = true
},
mousemove(){
    if(!this.resizing) return //没有拖动直接返回
},
mouseup(){
    //弹起结束拖拽
    this.resizing = false
}

逻辑看起来没啥问题 但是遇到了这样的场景
我鼠标拖动很快的时候 导致鼠标脱离了这个按钮,然后就无法触发 mouseup 事件
导致 结束不了拖拽的 bug.求问大佬们有没有遇到过这样的问题,如何解决?

Answer 1

参考了 @君迹我心 的回复的第一句话
把事件委托给范围尽可能大的一个祖先节点，比如 document 节点。
自己做了点改造如下

mounted() {
  window.addEventListener('mousemove', this.mousemove)
  window.addEventListener('mouseup', this.mouseup) // 把 mouseup 事件挂载到全局或者 document 上即可
  this.$once('hook:beforeDestroy', () => {
    window.removeEventListener('mousemove', this.mousemove)
    window.removeEventListener('mouseup', this.mouseup)
  })
},

Answer 2

把事件委托给范围尽可能大的一个祖先节点，比如 document 节点。
然后，拖出范围的问题有两种解决方案：

1. 在拖拽状态下，监听 mouseleave事件，执行mouseup的回调，亦即退出拖拽状态；
2. 鼠标出界之后再回来的时候，拖拽位置立即追上鼠标的实际位置。

推荐方案 1。

Answer 3

相关事件全都放在容器上，mousedown可以用event.target，mouseup基本上容器内也都是合理的

=====

而且后续肯定需要做拖动距离啊，之类之类的计算，放在容器上也比较好弄