时间戳

首页 > 解决方案 > 如何防止本机浏览器默认捏缩放行为？

javascript - 如何防止本机浏览器默认捏缩放行为？

问题描述

这个问题已经以几种不同的方式提出，但没有一个令人满意。

本机浏览器（例如 Mac 版 Google Chrome）默认支持“捏缩放”手势，这将缩放整个视口。如何禁用（响应）此默认行为，以便我可以编写自己的捏合/缩放逻辑？谷歌地图https://maps.google.com/似乎已经实现了这一点，因为在地图上捏只会缩放地图区域，而 UI 的其余部分保持不变，而在左侧边栏上捏会显示默认行为。

我尝试了一些方法，例如 HTML"viewport"元标记、CSStouch-action: none;和 JavaScript document.addEventListener('touchmove', e => { e.preventDefault() })，但它们似乎都只适用于移动设备。

标签： javascriptgoogle-mapsbrowserzoomingpinchzoom

解决方案

我不小心找到了适用于 Chrome 的解决方案。你基本上必须参加preventDefault活动"wheel"。ctrlKey如果true它是一个捏事件而不是滚动。

element.addEventListener('wheel', event => {
   const { ctrlKey } = event
   if (ctrlKey) {
      event.preventDefault();
      return
   }
}, { passive: false })

我猜这就是谷歌地图的做法。

（大多数）跨浏览器解决方案可能是所提到的技术的组合：user-scalable=no在"viewport"支持它的浏览器的元标记中，在本机 Chrome 的这个标记中。

推荐阅读