防止触摸设备上的 mousemove 事件

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);