android - touchmove事件如何禁止页面滚动
天蓬老师
天蓬老师 2017-05-16 13:35:17
0
1
813

最近在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)
Ty80

直接来。资料在这里

您的事件处理程序将传递 SyntheticEvent 的实例,SyntheticEvent 是浏览器本机事件的跨浏览器包装器。它与浏览器的本机事件具有相同的接口,包括 stopPropagation() 和 PreventDefault(),但事件在所有浏览器中的工作方式相同。

如果您发现由于某种原因需要底层浏览器事件,只需使用nativeEvent属性即可获取。每个 SyntheticEvent 对象都具有以下属性:

雷雷
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板