阻止触屏设备上的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;
});

- mxmtsk

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

- Popo