当鼠标在 vue 的元素之外上升时，如何获取 mouseup 事件？答案

【问题标题】：How can I get a mouseup event when the mouse goes up outside of the element with vue?当鼠标在 vue 的元素之外上升时，如何获取 mouseup 事件？
【发布时间】：2021-10-18 19:55:32
【问题描述】：

我可以通过添加@mousedown 轻松捕获元素上的mousedown 事件。如果光标在元素内部向上移动，添加 @mouseup 将捕获该事件。

但是，如果鼠标移到元素之外（包括浏览器窗口之外），则不会生成 mouseup 事件。

我怎样才能获得这个活动？

new Vue({
  el: '#app',
  
  data: {
    boxvalues: [true, false],
  },
  
  methods: {
    mousedown() {
      console.log( "mousedown" );
    },
    
    mouseup() {
      console.log( "mouseup" );
    }
    

  },
})

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

<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>

【问题讨论】：

标签： javascript vue.js mouseup

【解决方案1】：

你可以试试@mouseleave：

new Vue({
  el: '#app',
  
  data: {
    boxvalues: [true, false],
  },
  
  methods: {
    mousedown() {
      console.log( "mousedown" );
    },
    
    mouseup() {
      console.log( "mouseup" );
    }
    

  },
})

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

<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" @mouseleave="mouseup">
  </div>
    
</div>

【讨论】：

【解决方案2】：

跟踪鼠标事件的最高级别是在窗口对象上。

window.addEventListener('mouseup', function(e) {…}, false);

出于安全原因，无法跟踪浏览器窗口外的鼠标事件。但是，您可能希望使用 Pointer Lock API 来防止鼠标意外移动到浏览器窗口之外：https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API

【讨论】：