android - touchmove event how to disable page scrolling

Question

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?

Answer 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();
}

或者