Предотвратить событие перемещения мыши на сенсорных устройствах

Question

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

// The function is just a helper of mine (it ads addEventListener to the matched events
createEventListener('.hoverable', 'mousemove', function(e) {
  // stripped out some calculations for simplicity reasons
  const deltaX = 50;
  const deltaY = 50;

  const transformString = `translate3d(${deltaX}px, ${deltaY}px, 0)`;

  this.style.mozTransform = transformString;
  this.style.webkitTransform = transformString;
  this.style.transform = transformString;
});

Answer 1

Вы можете добавить стиль CSS: touch-action к своим элементам.

style="touch-action: none;"

или, возможно, добавить / удалить события и отменить действие этого события:

Таким образом, порядок запускаемых событий: 1) Touchstart 2) TouchMove 3) Touchend 4) MouseMove 5) mousedown 6) mouseup 7) click.

Может быть что-то вроде этого:

function handleTouch(e) {
  e.preventDefault();
}
document.getElementsByClassName("hoverable").addEventListener('touchstart', handleTouch, false);

document.getElementsByClassName("hoverable").removeEventListener('touchstart', handleTouch);