To capture the mousedown event on the element, you can simply add @mousedown. If the cursor is lifted inside the element, using @mouseup will capture the event.
However, if the mouse goes up outside of the element (even outside of the browser window), the mouseup event won't trigger.
Is there a way to achieve this event even when the mouse moves out of boundaries?
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>