I can easily capture the mousedown event on the element by adding a @mousedown. If the cursor goes up inside of the element, adding @mouseup will capture the event.
However, if the mouse goes up outside of the element (include outside of the browser window), the mouseup event is not generated.
How can I obtain this event?
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>The highest level to track mouse events is on window object.
window.addEventListener('mouseup', function(e) {…}, false);
Mouse events outside browser window can't be tracked due to security reasons. However you might want to use Pointer Lock API to prevent accidental mouse move outside of browser window: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API
You can try with @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>