Событие pointerup не срабатывает для действий мыши над ссылкой при обнаружении движения указателя - PullRequest
Новая
       26

Событие pointerup не срабатывает для действий мыши над ссылкой при обнаружении движения указателя

0 голосов
/ 12 сентября 2018

Я не могу получить событие pointerup для ссылки (тег A с установленным атрибутом href) для event.pointerType == 'mouse', если мышь была перемещена между pointerdown и pointerup.

У меня есть следующий сценарий: 

var lastEvent = false;
var handler = function (e) {
  if (lastEvent != e.type) {
    e.target.innerHTML += e.type + ' with ' + e.pointerType + '<br/>';
    e.target.scrollTo(0, e.target.scrollHeight);
  }
  lastEvent = e.type;
}
document.querySelector('a').addEventListener('pointerdown', handler);
document.querySelector('a').addEventListener('pointermove', handler);
document.querySelector('a').addEventListener('pointerup', handler);
div {
  height: 100vh;
  display: flex;
}
a {
  height: 60vh;
  width: 75vw;
  margin: auto;
  background-color: red;
  display: inline-block;
  user-select: none;
  touch-action: none;
  overflow-y: scroll;
}
<div>
    <a href="#"></a>
</div>

Если я нажимаю кнопку мыши, удерживаю ее некоторое время, а затем отпускаю, я получаю следующую последовательность:

  1. указатель вниз с помощью мыши
  2. указатель вверх с помощью мыши

Однако, если я нажимаю кнопку мыши, удерживаю ее нажатой и перемещаю указатель мыши вокруг, а затем отпускаю ее, я получаю этопоследовательность:

  1. указатель с помощью мыши
  2. указатель с помощью мыши

Проблема: указатель никогда не срабатывает.

Я думаю, это встроенный-в функции щелчка или перетаскивания в браузере (я проверял в Chrome), который блокирует событие pointerup от запуска, потому что если сделать это на span или удалить href из ссылки привязки, с которой он работаетэта последовательность:

  1. указатель с помощью мыши
  2. указатель с помощью мыши
  3. указатель с помощью мыши

Кроме того, он работает безупречно для сенсорногоуправляемый PointerEvents:

  1. указатель вниз с прикосновением
  2. указатель перемещенияh touch
  3. pointerup with touch

Я полагаю, что для элемента, отключающего эту защиту pointerup, нужно установить умное свойство css.Что-то вроде a { pointer-actions: click; }, но я не смог что найти.

1 Ответ

0 голосов
/ 12 сентября 2018

D'Oh!Я изложил ответ в вопросе, в основном.Это было действие drag , которое предотвратило запуск события pointerup.Простое добавление атрибута draggable="false" к элементу ссылки решило эту проблему. 

<a href="#" draggable="false"></a>

Подтверждение концепции: 

var lastEvent = false;
var handler = function (e) {
  if (lastEvent != e.type) {
    e.target.innerHTML += e.type + ' with ' + e.pointerType + '<br/>';
    e.target.scrollTo(0, e.target.scrollHeight);
  }
  lastEvent = e.type;
}
document.querySelector('a').addEventListener('pointerdown', handler);
document.querySelector('a').addEventListener('pointermove', handler);
document.querySelector('a').addEventListener('pointerup', handler);
div {
  height: 100vh;
  display: flex;
}
a {
  height: 60vh;
  width: 75vw;
  margin: auto;
  background-color: red;
  display: inline-block;
  user-select: none;
  touch-action: none;
  overflow-y: scroll;
}
<div>
    <a href="#" draggable="false"></a>
</div>

Единственным недостатком является то, что при draggable, установленном на false, все mousedown - mousemove - mouseup сработаютclick событие.Но этого можно избежать, проверив, больше ли разница для clientX / clientY между pointerdown и pointerup событием, чем определенное количество пикселей, сохраните это в переменной и добавьте обработчик события click, которыйработает e.preventDefault(); e.stopPropagation(); в этом случае.

...