Puedo capturar fácilmente el evento mousedown en el elemento agregando un @mousedown . Si el cursor sube dentro del elemento, agregar @mouseup capturará el evento.
Sin embargo, si el mouse sube fuera del elemento (incluido fuera de la ventana del navegador), no se genera el evento mouseup.
¿Cómo puedo obtener este evento?
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>El nivel más alto para rastrear los eventos del mouse está en el objeto de la ventana.
window.addEventListener('mouseup', function(e) {…}, false);Los eventos del mouse fuera de la ventana del navegador no se pueden rastrear por razones de seguridad. Sin embargo, es posible que desee utilizar la API de bloqueo de puntero para evitar que el mouse se mueva accidentalmente fuera de la ventana del navegador: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
Puedes probar con @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>