android - touchmove事件如何禁止页面滚动

【字号: 日期:2022-10-30浏览:42作者:雯心

问题描述

最近在H5页面上做了一个类似ios的 AssistiveTouch 的功能:一个悬浮的小挂件,可以在页面上移动,不用的时候自动贴边吸附。

出现的问题:

在Android手机上,移动小挂件的时候,页面会随之滚动。

因为 chrome浏览器为了提高页面滚动的流畅度,在新的chrome浏览器上,touchmove事件里不能用 event.preventDefault() 阻止页面滚动了。

新的绑定事件,需要这样处理 (加了一个 passive: false 属性)

document.addEventListener(’click’, onClick, {passive: false, capture: false});

但是我用的react,绑定监听直接用的

<p onTouchmove={::this.touchmove} ></p>

touchmove 移动挂件的时候,怎么阻止页面滚动那?

问题解答

回答1:

直接来。 资料在这里

Your event handlers will be passed instances of SyntheticEvent, a cross-browser wrapper around the browser’s native event. It has the same interface as the browser’s native event, including stopPropagation() and preventDefault(), except the events work identically across all browsers.

If you find that you need the underlying browser event for some reason, simply use the nativeEvent attribute to get it. Every SyntheticEvent object has the following attributes:

<p onTouchmove={this.touchmove.bind(this)} ></p>touchmove(event){ event.stopPropagation(); event.nativeEvent.stopImmediatePropagation();}或者

相关文章: