Как добавить прослушиватель событий для совместного нажатия обеих кнопок мыши?


Как добавить прослушиватель событий для совместного нажатия обеих кнопок мыши?

04.01.2020 02:32:04 Просмотров 88 Источник

Я не нашел никаких примеров в интернете, и сам Vue поддерживает только правый и левый клики отдельно, что странно, потому что это ИМО довольно простая вещь, которую легко сделать с помощью простого Javascript.

Мне просто нужен способ запуска события только при нажатии обеих кнопок мыши, а также без запуска каких - либо событий для отдельных кнопок мыши-возможно ли это в Vue?

javascript vue.js
У вопроса есть решение - Посмотреть?

https://stackoverflow.com/questions/59590252/how-do-i-add-an-event-listener-for-clicking-both-mouse-buttons-together#comment105346132_59590252
обе кнопки мыши нажаты ? Я не знаю, что это было такое. Неподдельный вопрос. Есть ли у вас пример веб-сайта, который делает и то, и другое вместе?
https://stackoverflow.com/questions/59590252/how-do-i-add-an-event-listener-for-clicking-both-mouse-buttons-together#comment105346147_59590252
Не можете ли вы проверить оба события с помощью простого двойного логического оператора (используя события нажатия и отпускания мыши). И когда оба нажаты отменить логику отдельных кнопок и начать логику для того, когда оба нажаты?
https://stackoverflow.com/questions/59590252/how-do-i-add-an-event-listener-for-clicking-both-mouse-buttons-together#comment105346173_59590252
Это был бы и мой подход - экономьте время щелчком левой кнопки мыши, экономьте время щелчком правой кнопки мыши, и если они достаточно близки, делайте свою логику.
https://stackoverflow.com/questions/59590252/how-do-i-add-an-event-listener-for-clicking-both-mouse-buttons-together#comment105346289_59590252
Я не знаю Vue, что хорошо, это даже возможно в нем, чтобы сказать левый клик от правого клика внутри функции, которая была запущена с v-on: click без использования click.щелкните левой кнопкой мыши.так ведь? Наверное, глупый вопрос...
https://stackoverflow.com/questions/59590252/how-do-i-add-an-event-listener-for-clicking-both-mouse-buttons-together#comment105346301_59590252
2 aloisdg говорит восстановить Монику, мне это нужно для простой браузерной игры в Vue
https://stackoverflow.com/questions/59590252/how-do-i-add-an-event-listener-for-clicking-both-mouse-buttons-together#comment105346443_59590252
@user3079765 хорошо тогда. Для элемента это было бы немного неожиданно.
https://stackoverflow.com/questions/59590252/how-do-i-add-an-event-listener-for-clicking-both-mouse-buttons-together#comment105404678_59590252
В случае, если мой ответ предоставил вам решение, Пожалуйста, подумайте о его принятии. В случае, если это не так, пожалуйста, отредактируйте свой вопрос с дополнительной информацией.

Ответы - Как добавить прослушиватель событий для совместного нажатия обеих кнопок мыши? / How do I add an event listener for clicking both mouse buttons together?

leonheess

04.01.2020 02:49:36

Реализация Vue ниже. "Оба-щелчок" в любом месте, чтобы проверить. Вы можете настроить значение таймаута для большей точности. Ниже Vue-версии вы можете найти ванильную JavaScript реализацию этой функциональности в случае, если кто-то ищет это.

Vue-версия:

let leftClick = false, rightClick = false;

// removes Vue console spam
Vue.config.devtools = false;
Vue.config.productionTip = false 

let example = new Vue({
  el: '#example',
  mounted () {
    // prevent context menu
    window.addEventListener('contextmenu', event => {
      if (leftClick && rightClick) {
        event.preventDefault();
      }
    });
  },
  methods: {
    checkClick: event => {
      switch (event.button) {
        case 0:
          leftClick = true;
          example.checkAndReset();
          break;
        case 2:
          rightClick = true;
          example.checkAndReset();
          break;
        default:
      }
    },
    checkAndReset: () => {
      if (leftClick && rightClick) {

        // your logic here
        console.log("both clicked");
        
      } else {
        setTimeout(() => {
          leftClick = false;
          rightClick = false;
        }, 200); // <-- timeout value
      }
    }
  }
})
body {
  overflow: hidden;
}

#example {
  height: 100vh;
  width: 100vw;
}
<script src="https://unpkg.com/vue"></script>
<div id="example" v-on:mousedown="checkClick"></div>

Vanilla-JavaScript-версия:

let leftClick = false, rightClick = false;

window.addEventListener('mousedown', event => {
  switch (event.button) {
    case 0:
      leftClick = true;
      checkAndReset();
      break;
    case 2:
      rightClick = true;
      checkAndReset();
      break;
  }
});

function checkAndReset(event) {
  if (leftClick && rightClick) {

    // your logic here
    console.log("both clicked");

  } else {
    setTimeout(() => {
      leftClick = false;
      rightClick = false;
    }, 200); // <-- timeout value
  }
}

// prevent context menu
window.addEventListener('contextmenu', event => {
  if (leftClick && rightClick) {
    event.preventDefault();
  }
});

Источник
https://stackoverflow.com/questions/59590252/how-do-i-add-an-event-listener-for-clicking-both-mouse-buttons-together/59590368#comment105346878_59590368
Спасибо! Я пытался тебя переубедить, но мне это не удалось...
Помочь в развитии проекта:

Другие вопросы

Ответы на ваши вопросы

Закрыть X