Heim > Artikel > Web-Frontend > Ü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:
事件名 | 作用 |
---|---|
touchstart | 手指按到屏幕上 |
touchmove | 手指在屏幕上滑动 |
touchend | 手指离开屏幕 |
touchcancle |
特殊情况下关闭/退出时触发
|
属性名 | 作用 |
---|---|
type | 事件类型 |
target | 事件源 |
preventDefault(returnValue) | 阻止默认行为 |
stopPropagation(cancleBubble) | 停止事件的传播 |
touches[0].clientX | 触碰位置的x值 |
changedTouches | 当前的值和离开的值 |
(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事件模型 | 处理多手指操作 |
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!