android – Touchmove-Ereignis zum Deaktivieren des Seitenscrollens
天蓬老师
天蓬老师 2017-05-16 13:35:17
0
1
815

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?

天蓬老师
天蓬老师

欢迎选择我的课程,让我们一起见证您的进步~~

Antworte allen(1)
Ty80

直接来。 资料在这里

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

或者
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage