Vue中如何捕获鼠标在元素外（含浏览器窗外）抬起的mouseup事件？

直接在元素触发mousedown时，给全局document绑定mouseup事件监听即可，不管鼠标在元素内、页面其他位置、甚至浏览器窗口外抬起，都能捕获到对应事件，事件触发后及时移除监听避免内存占用。

完整修改后代码 #

JavaScript代码 #

new Vue({
  el: '#app',
  
  data: {
    boxvalues: [true, false],
  },
  
  methods: {
    mousedown(e) {
      console.log("mousedown");
      // 全局绑定一次性mouseup监听，触发后自动销毁
      document.addEventListener('mouseup', this.globalMouseupHandler, { once: true });
      // 若需要兼容旧浏览器不支持once参数，注释上面一行，改用下面写法，同时在globalMouseupHandler里手动移除监听
      // document.addEventListener('mouseup', this.globalMouseupHandler);
      // 要捕获浏览器外的mouseup可以加下面这句，阻止浏览器默认拖拽行为
      // e.preventDefault();
    },
    
    mouseup() {
      console.log("元素内部触发mouseup");
    },

    globalMouseupHandler() {
      console.log("全局捕获mouseup事件，鼠标任意位置抬起都会触发");
      // 没使用once参数时需要加下面这行手动移除监听
      // document.removeEventListener('mouseup', this.globalMouseupHandler);
    }
  },

  // 组件销毁前兜底移除监听，避免内存泄漏
  beforeDestroy() {
    document.removeEventListener('mouseup', this.globalMouseupHandler);
  }
})

CSS代码（无需修改） #

.thediv {
  width: 200px;
  height: 200px;
  background-color: red;
  margin: 8px;
}

HTML代码（无需修改） #

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <div class="thediv" @mousedown="mousedown" @mouseup="mouseup">
  </div>
</div>

注意事项 #

• 旧版本浏览器不支持addEventListener的once参数，手动在回调里移除监听即可
• 若需要可靠捕获浏览器窗口外的mouseup事件，建议在mousedown回调中调用event.preventDefault()，屏蔽浏览器默认的文本/元素拖拽行为
• 组件销毁前的兜底移除逻辑可以避免页面切换时出现内存泄漏问题

内容的提问来源于stack exchange，提问作者James Hudson