如何防止默认处理触摸事件？

如何防止默认处理触摸事件？

TL; DR：

{ passive: false }

注册事件处理程序时我不见了。

我在使用

preventDefault()

Chrome时遇到的问题是由于其滚动“干预”（阅读：破坏了WebIE风格）。简而言之，由于

preventDefault()

可以更快地处理不调用的处理程序，因此在

addEventListener

named中添加了一个新选项

passive

。如果设置为，

true

则事件处理程序承诺不会调用

preventDefault

（如果调用，则将忽略该调用）。但是，Chrome决定更进一步，并

{passive:true}

设置默认设置（自版本56开始）。

解决方案是将事件侦听器

passive

显式设置为

false

：

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

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

附带说明一下，似乎我误解了

touch-action

CSS，但是我仍然不能使用它，因为需要在触摸顺序开始之前设置它。但是，如果不是这种情况，则可能是性能更高，并且似乎在所有适用的平台上都受支持（Mac上的Safari不支持，但iOS上则支持）。这篇文章说得最好：

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

CSS属性应该在组件上设置，而不是

document

像我那样设置：

<div >  ... my component ...</div>

就我而言，我仍然需要使用

passive

事件处理程序，但是很高兴知道这些选项……希望它能对某人有所帮助。