跨浏览器：防止在触摸板上缩放，但允许滚动答案

【问题标题】：Cross browser: prevent zoom on touchpad, but allow scroll跨浏览器：防止在触摸板上缩放，但允许滚动
【发布时间】：2023-02-04 04:27:43
【问题描述】：

我希望能够防止 2 指缩放触控板“滚轮”事件，但仍允许 2 指滚动。

我已禁用移动缩放：

<meta
      name="viewport"
      content="initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no, width=device-width, viewport-fit=cover" />

但这至少不会阻止在 MacOS Safari 和 Chrome 上进行缩放。

正如其他一些帖子所建议的那样，在“滚轮”事件上执行 preventDefault 意味着 2 根手指滚动停止在触控板上工作。例如

const ignorePinchToZoomEvent = (event: WheelEvent) => {
  if (event.ctrlKey) {
    event.preventDefault();
  }
}
document.addEventListener("wheel", ignorePinchToZoomEvent, { passive: false });

有没有一种公认的或可以接受的方法来做到这一点？

【问题讨论】：

标签： javascript html macos browser trackpad

【解决方案1】：

监听 window 对象上的事件解决了这个问题，只有缩放事件获得 ctrlKey 选项。不确定为什么文档不同。

const ignorePinchToZoomEvent = (event: WheelEvent) => {
  if (event.ctrlKey) {
    event.preventDefault();
  }
}
window.addEventListener("wheel", ignorePinchToZoomEvent, { passive: false });

【讨论】：