javascript - 如何在桌面浏览器中从触控板上捕获捏缩放手势(并防止默认)？

Question

如果您在带有触控板的笔记本电脑上的 Chrome/Firefox 中打开谷歌地图，如果您捏缩放，它只会缩放 map ，而 float 的 UI 元素保持静态。所以我知道我想做的事情是可能的。
浏览器似乎没有发出 touch*触控板在桌面浏览器上的触摸事件，但它 发出一系列 wheel触控板捏合缩放手势的事件(event.ctrlKey 设置为 true)。
问题是，即使使用 event.preventDefault() ，浏览器仍然总是缩放整个页面。似乎调用 preventDefault()在 wheel事件只是在控制台中打印此警告(Chrome 92):

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/6662647093133312`

(警告中的 URL 似乎没有任何用处。)
我尝试使用与谷歌地图( <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> )相同的元视口(viewport)标签，但它没有帮助。
那么谷歌地图是如何做到的呢？当您在触控板上捏缩放时，它们如何防止默认行为(缩放整个页面)？

Answer 1

我手头没有触控板，但既然你这么说wheel事件发生时，我假设使用鼠标滚轮的上下文是相同的。
TL;博士
调用addEventListener()与 {passive: false}因为它的第三个参数会做到这一点。
即:

window.addEventListener('wheel', function(e) {

  e.preventDefault()
  ...

}, {passive: false})

解释
在 addEventListener()的 document ， passive 的描述选项指出:

A boolean value that, if true, indicates that the function specified by listener will never call preventDefault(). If a passive listener does call preventDefault(), the user agent will do nothing other than generate a console warning.

根据同一页面中标题为“ Improving scrolling performance with passive listeners”的部分:

According to the specification, the default value for the passive option is always false. However, this introduces the potential for event listeners handling certain touch events (among others) to block the browser's main thread while it is attempting to handle scrolling, resulting in possibly enormous reduction in performance during scroll handling.

To prevent this problem, some browsers (specifically, Chrome and Firefox) have changed the default value of the passive option to true for the touchstart and touchmove events on the document-level nodes Window, Document, and Document.body. This prevents the event listener from being called, so it can't block page rendering while the user is scrolling.

虽然上面的段落只提到了 touchstart和 touchmove事件，我发现它也适用于 wheel Chrome 和 Firefox 中的事件。
所以如果你想做 preventDefault()工作，你要专门设置 passive false 的选项.