Блог

Главная - Вопросы по программированию - Как я могу получить событие mouseup, когда мышь выходит за пределы элемента с помощью vue?

Как я могу получить событие mouseup, когда мышь выходит за пределы элемента с помощью vue?

#javascript #vue.js #mouseup

Вопрос:

Я могу легко зафиксировать событие наведения курсора мыши на элемент, добавив a @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>

Ответ №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);

События мыши за пределами окна браузера не могут быть отслежены по соображениям безопасности. Однако вы можете использовать API блокировки указателя, чтобы предотвратить случайное перемещение мыши за пределы окна браузера: https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API

Метки: ,