Question

我已经实现了使用成功工作的鼠标滚轮事件来放大/缩小图像。但是当我使用触摸板（使用两个手指放大/缩小）时，行为是不同的。如何区分鼠标轮事件和触摸板事件之间的差异。

Answer 1

首先，在设计更高级的触摸交互时必须要小心：当用户使用鼠标时，它将通过点击事件进行响应，但当用户触摸屏幕时，将发生触摸和点击事件。只需单击一下，事件的顺序为：

1）touchstart 2）touchmove 3）touchend 4）鼠标悬停 5）mousemove 6）mousedown 7）mouseup 8）点击

当然，这意味着如果您正在处理touchstart等触摸事件，则需要确保不处理相应的mousedown和/或click事件。如果您可以取消触摸事件（在事件处理程序中调用preventDefault（）），则不会为触摸生成任何鼠标事件。

更新：您可以识别触摸或点击如下： `

$('#element-id').on('click touchend',function(e){
  if(e.type=='click')
      console.log('Mouse Click');
  else
      console.log('Touch');
});

`

Answer 2

不幸的是，同一个滚轮事件会同时向捏和鼠标滚轮触发，因此目前似乎无法使用其他事件。

但是，我发现鼠标滚轮倾向于以比捏住更大的方式触发e.deltaY数字。

因此，我有一个这样的听众：

const handleZoom = (e) => {
  e.preventDefault();

  // ignore mouse wheel events that have bigger steps
  if (Math.abs(e.deltaY) > 25) {
    return;
  }

  // do what you want to do with pinching here
}
document.addEventListener("wheel", handleZoom);

您可以使用25变量来满足自己的需要。但是在大多数情况下，我注意到捏合运动通常更加微妙，并且增量接近0，而鼠标滚轮事件通常会触发较大的滚动。

如何使用触摸板和鼠标滚轮事件区分夹点或放大/缩小

2 个答案: