javascript - Scrollen Sie auf einem mobilen Gerät schnell durch den Bildschirm und klicken Sie dann, um das Scrollen zu stoppen, indem Sie versehentlich das <a>-Tag berühren und beim Klicken zu anderen Seiten springen.

Question

1 Frage:
Wenn Sie auf einem mobilen Gerät schnell durch den Bildschirm scrollen und dann klicken, um das Scrollen zu stoppen, wie können Sie dann verhindern, dass Sie beim Klicken versehentlich das Tag berühren und zu anderen Seiten springen?

2 Dies ist auch ein Problem, das tatsächlich bei der Front-End-Entwicklung mobiler Endgeräte auftritt, genauer gesagt, wenn unsere aktuelle Seite viel Inhalt hat, eine hohe Höhe hat und Bildlaufleisten angezeigt werden Verwenden Sie unsere Hände. Wischen Sie über den Bildschirm, und der Seiteninhalt auf dem Bildschirm wird schnell gescrollt, und das Scrollen stoppt nicht, weil Ihre Hand den Bildschirm verlassen hat. Wenn wir zu diesem Zeitpunkt mit dem Scrollen aufhören möchten, tippen wir auch leicht auf den Bildschirm, um den Bildschirm anzuhalten. Zu diesem Zeitpunkt gibt es jedoch ein Problem. Wenn die angeklickte Position auf dem Bildschirm zufällig eine Beschriftung oder eine Schaltfläche hat, ist es einfach, die nächste Route einzugeben. Ich habe einige Anweisungen zum Scroll-Ereignis auf MDN überprüft, aber es gibt keine Erklärung zur Geschwindigkeit des Scroll-Vorgangs und zur Reaktionszeit beim Stoppen.

Meine Idee besteht darin, zunächst festzustellen, ob das Scroll-Ereignis gestoppt wurde. Wenn es stoppt, geben Sie dann eine gewisse Zeitverzögerung ein, bevor nachfolgende Klicks wirksam werden. Klicken Sie in diesem Fall nach dem schnellen Scrollen zum ersten Mal auf den Bildschirm, um das Scrollen des Bildschirms zum zweiten Mal zu stoppen. Wenn Sie auf eine Beschriftung klicken, können Sie zu anderen Routen springen. Wie soll dies erreicht werden?

Answer 1

你们产品要求这么苛刻吗，我感觉这不应该成为问题，应该遵循这样的物理逻辑，我是没见过哪个产品规避了这个逻辑。如果非要解决，你的思路是可行的，那样的话，你需要代理所有链接或有点击行为的元素，个人认为是一种得不偿失的做法。

Answer 2

设一个状态值就可以，就比如说，你滚动的时候状态值isScrolling = true;当滚动完成或者被点击停止时设置isScrolling = false. 事件触发只能在isScrolling= false时有效。

Answer 3

我也处理过相同的问题

• 区分点击事件，点击事件用touch替换

• 计算点击的时长和判断的距离，两个参数，判断是不是触发点击事件

如果还不清楚的话 我晚点给你一下demo

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