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

EN

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

1) touchstart 2) touchmove 3) touchend 4)鼠标悬停5)鼠标移动6)鼠标向下7)鼠标向上8)点击

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

更新:你可以像这样识别触摸或点击：`

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

`

不幸的是，相同的滚轮事件既可以用于夹击，也可以用于鼠标滚轮，因此此时似乎不可能使用不同的事件。

然而，我发现鼠标滚轮倾向于以比挤压更大的方式触发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，而鼠标滚轮事件通常会触发更大的滚动。