Heim  >  Artikel  >  Web-Frontend  >  Übersicht über Klickereignisse und häufig verwendete Ereignisse in js (PC und Mobil)

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

php是最好的语言
php是最好的语言Original
2018-08-07 10:10:315205Durchsuche

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn