Übersicht über Klickereignisse und häufig verwendete Ereignisse in js (PC und Mobil)

1. Klickereignis:

Auf der PC-Seite handelt es sich um ein Klickereignis, auf der mobilen Seite jedoch häufig Klicks Was ist zu tun und was ist beim Doppelklicken zu tun? Wenn der mobile Browser den Klick erkennt, führt er ihn erst aus, nachdem er bestätigt hat, dass es sich um einen Klick handelt. Bei der Verwendung von Click auf der mobilen Seite kommt es zu einer Verzögerung von 300 ms Der Browser wartet nach dem ersten Klick auf den ersten Klick. Sie müssen noch 300 ms warten, um zu sehen, ob der zweite Klick ausgelöst wird ist ein Klick

In einigen Szenarien ist es jedoch notwendig Verzögerung abbrechen: (1) Still-Zoom: Um diese Methode zu verwenden, müssen Sie den Zoom vollständig deaktivieren, um das Ziel zu erreichen Terminals können dieses Verzögerungsproblem lösen;

width – die Breite des Ansichtsfensters; height – die Höhe des anfänglichen Skalierungsverhältnisses; Verhältnis, auf das der Benutzer zoomen darf; maximaler Maßstab – das maximale Verhältnis, auf das der Benutzer zoomen darf; skalierbar – der Benutzer kann manuell zoomen

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

(2) fastclick. js: FastClick ist eine leichtgewichtige Bibliothek, die von FT Labs speziell zur Lösung des 300-Millisekunden-Klickverzögerungsproblems mobiler Browser entwickelt wurde. Kurz gesagt, wenn FastClick das Touchend-Ereignis erkennt, löst es sofort ein simuliertes Klickereignis über das benutzerdefinierte DOM-Ereignis aus und blockiert das tatsächlich vom Browser ausgelöste Klickereignis nach 300 Millisekunden.

Erster Schritt: Führen Sie das ein fügen Sie die Datei fastclick.js in die Seite ein.
Schritt 2: Fügen Sie der js-Datei den folgenden Code hinzu: Rufen Sie nach dem Fensterladeereignis FastClick.attach() für den Text auf.

window.addEventListener(function(){   
    FastClick.attach( document.body );  
},false );

Wenn Ihr Projekt JQuery verwendet, schreiben Sie den obigen Code wie folgt um:

$(function() {    
    FastClick.attach(document.body);    
});

Ersetzen Sie das Klickereignis auf der mobilen Seite:

(1) Verwenden Sie Touchstart: Touch-Ereignisse umfassen Touchstart, Touchend, Touchmove usw. Verwenden Sie einfach Touchstart, um Click zu ersetzen. Das Problem ist jedoch, dass es zu diesem Zeitpunkt Konflikte gibt, wenn ich ein Click-Ereignis und ein Sliding-Ereignis an dasselbe Objekt binden möchte ;Wenn Ihr Finger auf ein Element klickt, wird Folgendes ausgeführt: touchstart --> touchmove -->click

Touch-Ereignismodell:

Ereignisname Funktion touchstart Drücken Sie Ihren Finger auf den Bildschirm touchmove Finger gleitet über den Bildschirm berührend Lassen Sie Ihren Finger vom Bildschirm fern berührenabbrechen

事件名	作用
touchstart	手指按到屏幕上
touchmove	手指在屏幕上滑动
touchend	手指离开屏幕
touchcancle	特殊情况下关闭/退出时触发

Ausgelöst beim Schließen/Verlassen unter besonderen Umständen

属性名	作用
type	事件类型
target	事件源
preventDefault（returnValue）	阻止默认行为
stopPropagation（cancleBubble）	停止事件的传播
touches[0].clientX	触碰位置的x值
changedTouches	当前的值和离开的值

Attribute des Berührungsereignisses:

(2) Tap-Ereignis: Es gibt kein Tap-Ereignis im Standardereignis. Das Tap-Ereignis wird von einigen Bibliotheken wie Zepto gekapselt und zeichnet die Zeit und Fingerposition bei Touchstart und Touchend auf Wenn der Finger die gleiche Position hat und das Zeitintervall kurz ist und das Touchmove-Ereignis während des Vorgangs nicht ausgelöst wird, wird die Rückruffunktion nach 300 ms immer noch generiert Keine Überwachung des Objekts, was zum „Click Through“-Phänomen führt: 1) Auf der Seite wird eine Schaltfläche angezeigt (das Modalfeld schließen) und direkt darunter befindet sich ein Eingabefeld die Schaltfläche (auf der Hauptseite); 2) Wenn auf die Schaltfläche „Schließen“ im Modalfeld geklickt wird, verschwindet das Modalfeld sofort, aber das Klickereignis wird 300 ms später ausgelöst und das Eingabefeld hört das Klickereignis ab Das Eingabefeld wird fokussiert

Häufig verwendete Ereignisse auf dem PC:

事件名	作用
click	当鼠标点击时触发
mouseover	当鼠标指针移动到元素上时触发
mouseout	当鼠标指针移出元素时触发
mouseenter	当鼠标指针移动到元素上时触发（不支持冒泡）
mouseleave	当鼠标指针移出元素上时触发（不支持冒泡）
mousemove	当鼠标指针移动到元素上时触发
mousedown	当元素上按下鼠标按钮时触发
mouseup	当在元素上释放鼠标按钮时触发
mousewheel	当鼠标滚轮正在被滚动时运行的脚本
keydown	在用户按下按键时触发
keyup	当用户释放按键时触发
load	页面结束加载之后触发
scroll	当元素滚动条被滚动时运行的脚本
blur	元素失去焦点时运行的脚本
focus	当元素获得焦点时运行的脚本
change	在元素值被改变时运行的脚本

Häufig verwendete Ereignisse auf mobilen Endgeräten:

事件名	作用
click	当点击时触发（单击）
load	页面结束加载之后触发
scroll	当元素滚动条被滚动时运行的脚本
blur	元素失去焦点时运行的脚本
focus	当元素获得焦点时运行的脚本
change	在元素值被改变时运行的脚本
input	代替keyup、keydown
touch事件模型	处理单手指操作
gesture事件模型	处理多手指操作

Verwandte Empfehlungen:

Verwenden Sie natives JS, um Tap-Ereignisse zu kapseln, um die 300-ms-Verzögerung auf mobilen Endgeräten zu lösen

Beschreibt die Grundlagen von JavaScript Mobile Veranstaltungen und eine Zusammenfassung häufig verwendeter Veranstaltungsbibliotheken

Das obige ist der detaillierte Inhalt vonÜbersicht über Klickereignisse und häufig verwendete Ereignisse in js (PC und Mobil). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!