Recently, a function similar to AssistiveTouch on ios has been made on the H5 page: a small suspended widget that can be moved on the page and automatically adsorbs to the edge when not in use.
Problems that arise:
On Android phones, when you move the widget, the page will scroll accordingly.
Because in order to improve the smoothness of page scrolling in the chrome browser, on the new chrome browser, touchmove
events cannot be used event.preventDefault()
to prevent page scrolling.
New binding events need to be handled like this (added a passive: false
attribute)
document.addEventListener('click', onClick, {passive: false, capture: false});
But I use react, and the binding monitor is used directly
<p onTouchmove={::this.touchmove} >
</p>
touchmove How to prevent the page from scrolling when moving the widget?
PHP中文网2017-05-16 13:37:17
直接来。 资料在这里
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();
}
或者