Analyse von Tap-Ereignissen und Tap-Point-Through-Prinzipien

Der Inhalt dieses Artikels befasst sich mit der Analyse des Tap-Vorfalls und dem Tap-Point-Through-Prinzip. Er hat einen guten Referenzwert und ich hoffe, er kann Freunden in Not helfen.

Führen Sie zunächst das Tap-Ereignis ein:

1. Die Bedeutung des Tap-Ereignisses: Auf der mobilen Seite wird das Klickereignis um 300 ms verzögert, da der Browser bestimmt, ob das Der Klick wird innerhalb von 300 ms fortgesetzt, um zu bestimmen, ob die Webseite vergrößert werden soll. (Das heißt, es gibt eine Zeit von 300 ms, um den Effekt eines Doppelklicks zum Vergrößern der Webseite zu beurteilen. Nach Ablauf von 300 ms wird das Klickereignis ausgelöst.)

2. Tap-Ereignisimplementierung : Verwenden Sie standardmäßig das vom Browser unterstützte Touch-Ereignis. Zur Simulation werden Tap-Ereignisse basierend auf den drei Ereignissen Touchstart, Touchmove und Touchend simuliert, um den Effekt der Kapselung von Tap-Ereignissen zu erzielen. Der folgende Code ist eine einfache Kapselung, die ich erstellt habe.

//定义tap函数，传入需要绑定的元素，和一个回调函数
function tap(el,callBack){
    var startTime = 0;
    var maxTime = 250;
    var [startX,startY,endX,endY] = [0,0,0,0]; //es6解构赋值
    el.addEventListener('touchstart',function(e){                            
        console.log('touchstart');
        startTime = Date.now(); //开始触摸的事件  
        startX = e.touches[0].clientX; //手指在浏览器横坐标
        startY = e.touches[0].clientY; //手指在浏览器纵坐标
    })
    el.addEventListener('touchmove',function(e){
        console.log('touchmove');
        endX = e.touches[0].clientX; //手指在浏览器横坐标
        endY = e.touches[0].clientY; //手指在浏览器纵坐标
    })
    el.addEventListener('touchend',function(e){
        console.log('touchend');
        if( (Date.now()-startTime) > maxTime){ //如果超过了最大时间，不触发tap
               console.log('超时了');
            return ; 
        }
        //如果移动距离过大，则不是tap事件。为了大家在电脑上能看到效果，这里设置成了1000，因为在电脑上移动幅度不好控制。如果是在移动端，设置为30就差不多了。
        if(Math.abs(endX-startX) > 1000 || Math.abs(endY-startY) > 1000){
             return;
        }
        callBack(e);
     })
}
tap(document.documentElement,function(e){
    console.log(e);
});

Um es zu klären: Die Reihenfolge der Tap-Ereignisse ist touchstart -> touchmove -> touchend -> Durchdringung:

Dieses Anwendungsszenario wird häufig angezeigt. Klicken Sie auf die Maskenebene. Die Maskenebene verschwindet und gibt die untere Seite frei. Wenn ein Element auf der unteren Seite an ein Klickereignis gebunden ist und Sie beim Klicken auf die Maske genau auf die Position des Elements klicken, werden Sie feststellen, dass das Klickereignis des Elements ausgelöst wird.
Die auslösende Sequenz auf der PC-Seite ist Mousedown -> Mouseup -> ; touchend -> click wird in dieser Reihenfolge ausgeführt. Da unsere Maske beim Touchend verschwunden ist, entspricht dies dem Klicken auf das Element auf der unteren Seite. Das untere Element löst also das Klickereignis aus.
Die Lösung für die Tap-Penetration:

Tap-Event oder Click-Event einheitlich verwenden.
Verzögern Sie das Verschwinden der Maskenschicht auf mehr als 300 ms
Nehmen Sie eine transparente Maske, um sie zu blockieren (nicht empfohlen, zu dumm, trotzdem lästig)
Verwenden Sie die Fastclick-Bibliothek
Verwandte Empfehlungen:

HTML5 neue Attribute: fünf globale Attribute Einführung zu Attributen

Canvas-native Implementierung der mobilen Front-End-Webseitensignatur

Das obige ist der detaillierte Inhalt vonAnalyse von Tap-Ereignissen und Tap-Point-Through-Prinzipien. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!