android - événement touchmove comment désactiver le défilement des pages

Question

Récemment, j'ai créé une fonction similaire à AssistiveTouch sur iOS sur la page H5 : un petit widget suspendu qui peut être déplacé sur la page et s'adsorbe automatiquement sur le côté lorsqu'il n'est pas utilisé.

Problèmes qui surviennent :

Sur les téléphones Android, lorsque vous déplacez le widget, la page défile en conséquence.

Car afin d'améliorer la fluidité du défilement des pages, le navigateur Chrome touchmove事件里不能用 event.preventDefault() empêche le défilement des pages sur le nouveau navigateur Chrome.

Les nouveaux événements de liaison doivent être gérés comme ceci (ajout d'un attribut passive: false)

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

Mais j'utilise React et lie le moniteur directement

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

Comment empêcher la page de défiler lors du déplacement du widget avec touchmove ?

Answer 1

直接来。 资料在这里

Vos gestionnaires d'événements recevront des instances de SyntheticEvent, un wrapper multi-navigateur autour de l'événement natif du navigateur. Il a la même interface que l'événement natif du navigateur, y compris stopPropagation() et PreventDefault(), sauf que les événements fonctionnent de la même manière dans tous les navigateurs.

Si vous constatez que vous avez besoin de l'événement de navigateur sous-jacent pour une raison quelconque, utilisez simplement l'attribut nativeEvent pour l'obtenir. Chaque objet SyntheticEvent possède les attributs suivants :

<p onTouchmove={this.touchmove.bind(this)} ></p>

touchmove(event){
  event.stopPropagation();
  event.nativeEvent.stopImmediatePropagation();
}

或者