Home > OS >  How can I get a mouseup event when the mouse goes up outside of the element with vue?
How can I get a mouseup event when the mouse goes up outside of the element with vue?

Time:10-19

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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response:

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

  • Related