android – Touchmove-Ereignis zum Deaktivieren des Seitenscrollens

Question

Kürzlich habe ich auf der H5-Seite eine ähnliche Funktion wie AssistiveTouch auf iOS erstellt: ein kleines schwebendes Widget, das auf der Seite verschoben werden kann und automatisch an der Seite verschwindet, wenn es nicht verwendet wird.

Probleme, die auftreten:

Wenn Sie auf Android-Telefonen das Widget verschieben, wird die Seite entsprechend gescrollt.

Denn um das reibungslose Scrollen von Seiten zu verbessern, verhindert der Chrome-Browser touchmove事件里不能用 event.preventDefault() das Scrollen von Seiten im neuen Chrome-Browser.

Neue Bindungsereignisse müssen so behandelt werden (ein passive: false-Attribut hinzugefügt)

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

Aber ich verwende React und binde den Monitor direkt

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

Wie kann verhindert werden, dass die Seite scrollt, wenn das Widget mit touchmove verschoben wird?

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

或者