javascript - Sur un appareil mobile, faites défiler rapidement l'écran, puis cliquez pour arrêter le défilement. Comment éviter de toucher accidentellement la balise <a> et de passer à d'autres pages en cliquant ?

Question

1 Question :
Si vous faites défiler rapidement l'écran sur un appareil mobile, puis cliquez pour arrêter le défilement, comment pouvez-vous éviter de toucher accidentellement la balise a et de passer à d'autres pages lorsque vous cliquez ?

2 C'est aussi un problème effectivement rencontré dans le développement front-end des terminaux mobiles, pour être plus précis, dans des circonstances normales, lorsque notre page actuelle a beaucoup de contenu, est haute en hauteur et que des barres de défilement apparaissent, lorsque nous le faisons. utilisez nos mains Faites glisser l'écran, et le contenu de la page sur l'écran défilera rapidement, et le défilement ne s'arrêtera pas car votre main a quitté l'écran. À ce moment-là, lorsque nous voulons arrêter le défilement, nous tapotons également légèrement l'écran pour arrêter l'écran. Mais il y a un problème à ce moment-là. Si la position cliquée sur l'écran comporte une étiquette ou un bouton, il sera facile d'entrer dans l'itinéraire suivant. J'ai vérifié quelques instructions sur l'événement de défilement sur mdn, mais il n'y a aucune explication sur la vitesse du processus de défilement et le temps de réaction d'arrêt.

Mon idée est d'abord de déterminer si l'événement de défilement s'est arrêté lorsqu'il s'arrête, puis de donner un certain délai avant que les clics suivants soient efficaces. Dans ce cas, après un défilement rapide, cliquez une première fois sur l'écran pour arrêter le défilement de l'écran. Cliquez une deuxième fois sur l'écran. Si vous cliquez sur une étiquette, vous pouvez accéder à d'autres itinéraires. Comment y parvenir ?

Answer 1

Vos exigences en matière de produits sont-elles si exigeantes ? Je pense que cela ne devrait pas poser de problème. Cela devrait suivre une telle logique physique. Je n'ai jamais vu de produit contournant cette logique. Si vous devez le résoudre, votre idée est réalisable. Dans ce cas, vous devez proxy tous les liens ou éléments avec un comportement de clic. Personnellement, je pense que c'est une approche qui n'en vaut pas la peine.

Answer 2

Définissez simplement une valeur d'état. Par exemple, lorsque vous faites défiler, la valeur d'état isScrolling = true ; lorsque le défilement est terminé ou cliqué pour arrêter, définissez isScrolling = false.

Answer 3

J'ai également été confronté au même problème

• Distinguez les événements de clic et remplacez les événements de clic par touch

• Calculez la durée du clic et la distance pour déterminer si l'événement de clic est déclenché

Si ce n'est pas encore clair, je vous ferai une démo plus tard

 $('#allItems').delegate('.js-snifferFullNet','click touchend',function(e) {
            console.log('touchend test2 数据是：'+(document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop));
            var  endTime = new Date().getTime() - startTime;
            console.log(endTime);
            if(e.type=='touchend' &&((10<endTime)|| (Math.abs(touch_pos-(document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop))>3))) return;
            else{
                console.log(this);
                var type = e.currentTarget.childNodes[2].innerText;
                regClickBtn.snifferAllNetBtn(type);
            }
        });