android - touchmove事件如何禁止页面滚动-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

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

天蓬老师 2017-05-16 13:35:17

[Android讨论组]

1198

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

PHP中文网2017-05-16 13:37:17 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();
}

或者

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>