Почему щелчок правой кнопкой мыши вызывает событие «pointerdown» при нажатии, а не событие «pointerup» при его отпускании? - PullRequest
Новая
       54

Почему щелчок правой кнопкой мыши вызывает событие «pointerdown» при нажатии, а не событие «pointerup» при его отпускании?

1 голос
/ 11 апреля 2020

Я использую pointerevents вместо событий мыши, чтобы иметь возможность иметь универсальное решение для указателя, вместо того, чтобы отдельно рассматривать события касания и мыши и т. Д. c.

проблема в том, что когда я нажимаю правую кнопку мыши, событие указателя запускается нормально (как и ожидалось), но при его отпускании событие указателя не срабатывает (неожиданно).

Я создал минимально воспроизводимую запись дело здесь: https://codesandbox.io/s/proud-smoke-1x2w5?file= / src / index. js

И я создал видео этой проблемы здесь: https://app.usebubbles.com/6a21646e-13d2-4a7f-a598-dfad35a9c0d3

Почему щелчок правой кнопкой мыши вызывает событие «pointerdown» при нажатии вниз, а не событие «pointerup» при отпускании?

Обратите внимание, что это Chrome 81 (https://www.whatsmybrowser.org/b/VJUHP) ) * * тысяча двадцать-две

1 Ответ

1 голос
/ 11 апреля 2020

Похоже, что это связано с "contextmenu", проверьте приведенный ниже фрагмент, если вы запретите поведение по умолчанию, тогда событие "pointerup" вызывается при щелчке правой кнопкой мыши. 

const app = document.getElementById("app");
const count = document.getElementById("count");

const writeCount = (n) => (count.innerHTML = n);

noContextMenu.addEventListener("contextmenu", (e) => {
  e.preventDefault();
});

let n = 0;
writeCount(0);

app.addEventListener("pointerdown", (e) => {
  writeCount(++n);
  eventType.innerHTML = "pointerdown";
});

app.addEventListener("pointerup", (e) => {
  writeCount(--n);
  eventType.innerHTML = "pointerup";
});
body {
  font-family: sans-serif;
}

#contextmenu {
  margin: 10px;
  padding: 20px;
  width: 100px;
  float: left;
  border: 1px solid blue;
}

#noContextMenu {
  margin: 10px;
  padding: 20px;
  width: 100px;
  float: left;
  border: 1px solid darkviolet;
}
<div id="app">
  <div>
    Event type: (<span id="count"></span>) <span id="eventType"></span>
  </div>
  <div id="contextmenu">context menu</div>
  <div id="noContextMenu">noContextMenu</div>
</div>
...