TL;DR：我{ passive: false }在注册事件处理程序时丢失了。

我在preventDefault()Chrome 上遇到的问题是由于它们的滚动“干预”（阅读：破坏网络 IE 风格）。简而言之，因为preventDefault()可以更快地处理不调用的处理程序，所以在addEventListenernamed中添加了一个新选项passive。如果设置为truethen 事件处理程序Promise不调用preventDefault（如果调用，调用将被忽略）。然而，Chrome 决定更进一步并{passive: true}设置默认值（自版本 56 起）。

解决方案是调用passive显式设置为的事件侦听器false：

window.addEventListener('touchmove', ev => {
  if (weShouldStopDefaultScrollAndZoom) {
    ev.preventDefault();
    ev.stopImmediatePropagation();
  };
}, { passive: false });

请注意，这会对性能产生负面影响。

作为旁注，我似乎误解了touch-actionCSS，但是我仍然无法使用它，因为它需要在触摸序列开始之前进行设置。但如果不是这种情况，它的性能可能更高，并且似乎在所有适用平台上都受支持（Mac 上的 Safari 不支持，但在 iOS 上支持）。这篇文章说得最好：

对于您的情况，您可能希望将文本区域（或其他任何内容）标记为“touch-action: none”以禁用滚动/缩放而不禁用所有其他行为。

CSS 属性应该设置在组件上，而不是document像我那样设置：

<div style="touch-action: none;">
  ... my component ...
</div>

在我的情况下，我仍然需要使用passive事件处理程序，但很高兴知道这些选项......希望它对某人有所帮助。

尝试使用 if 语句来查看是否有多个触摸：

document.body.addEventListener("touchmove", ev => {
  if (ev.touches.length > 1) {
    ev.preventDefault();
    ev.stopImmediatePropagation();
  }
}, true);

这是我的想法：

我用了一个divwithopacity: 0来覆盖mapwith z-index> mapz-index

我会在covered div. 如果我发现2个手指在这种感动covered div，我会display: none这样div，让用户可以使用手指2在此地图。

否则，document touchEnd我将在恢复covered div使用display: block，以确保我们可以滚动。

就我而言，我已经解决了

@HostListener('touchmove', ['$event'])
    public onTouch(event: any): void {
    event.stopPropagation();
    console.log('onTouch', event);
}