Présentation des événements de clic et des événements couramment utilisés en js (PC et mobile)

1. Événement clic :

Côté PC c'est un événement clic, mais côté mobile c'est un événement clic Dans les projets mobiles on distingue souvent. clics Que faire et que faire en double-cliquant, donc lorsque le navigateur mobile reconnaît le clic, il ne l'exécutera qu'après avoir confirmé qu'il s'agit d'un clic. Il y aura un délai de 300 ms lors de l'utilisation du clic côté mobile : le. Le navigateur attendra le premier clic après le premier clic, vous devez encore attendre 300 ms pour voir si le deuxième clic est déclenché, ce n'est pas un clic. est un clic

Cependant, dans certains scénarios, il est nécessaire Annuler le délai : (1) Toujours zoomer : Pour utiliser cette méthode, vous devez désactiver complètement le zoom pour atteindre l'objectif, bien que la plupart des mobiles. les terminaux peuvent résoudre ce problème de retard, certains téléphones Apple ne le peuvent toujours pas ;

largeur - la largeur de la fenêtre d'affichage ; hauteur - l'échelle initiale - le rapport de mise à l'échelle initiale - le minimum ; rapport sur lequel l'utilisateur est autorisé à zoomer ; échelle maximale - le rapport maximal sur lequel l'utilisateur est autorisé à zoomer ; évolutif par l'utilisateur - l'utilisateur est-il possible de zoomer manuellement

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

(2) fastclick.js : FastClick est une bibliothèque légère développée par FT Labs spécifiquement pour résoudre le problème de délai de clic de 300 millisecondes des navigateurs mobiles. En bref, lorsque FastClick détecte l'événement touchend, il déclenchera immédiatement un événement de clic simulé via l'événement personnalisé DOM et bloquera l'événement de clic qui est réellement déclenché par le navigateur après 300 millisecondes

Première étape : introduire le fichier fastclick.js dans la page.
Étape 2 : Ajoutez le code suivant au fichier js : Après l'événement de chargement de la fenêtre, appelez FastClick.attach() sur le corps.

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

Si votre projet utilise JQuery, réécrivez le code ci-dessus comme :

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

Remplacez l'événement click côté mobile :

(1) Utilisez touchstart : les événements tactiles incluent touchstart, touchend, touchmove, etc. Utilisez simplement touchstart pour remplacer click, mais le problème est, que se passe-t-il si je veux lier un événement de clic et un événement de glissement sur le même objet ? time Un conflit se produira ; côté mobile, lorsque votre doigt clique sur un élément, il passera par : touchstart --> touchmove -> touchend -->click

Modèle d'événement tactile :

Nom de l'événement

Fonction

touchstart

Appuyez votre doigt sur l'écran

toucher

Doigt glissant sur l'écran

touchend

Laissez votre doigt hors de l'écran

touchcancle

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

Déclenché lors de la fermeture/sortie dans des circonstances particulières

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

Attributs de l'événement tactile :

(2) Événement Tap : il n'y a pas d'événement tap dans l'événement standard. L'événement tap est encapsulé par certaines bibliothèques, telles que zepto, en utilisant touch. Il enregistre l'heure et la position du doigt au début et à la fin du toucher, et les compare. au toucher. Si le doigt Si la position est la même et que l'intervalle de temps est court, et que l'événement touchmove n'est pas déclenché pendant le processus, la fonction de rappel est appelée après 300 ms, mais il y en a. pas de suivi sur l'objet, ce qui entraîne le phénomène de "click through". : 1) Une boîte modale apparaît sur la page Il y a un bouton sur la boîte modale (fermer la boîte modale), et il y a une boîte de saisie juste en dessous. le bouton (sur la page principale) ; 2) Lorsque vous cliquez sur le bouton de fermeture de la boîte modale, la boîte modale disparaît immédiatement, mais l'événement de clic est déclenché 300 ms plus tard, et la zone de saisie écoute l'événement de clic, donc la zone de saisie aura le focus

Événements couramment utilisés sur PC :

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

Événements couramment utilisés sur les terminaux mobiles :

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

Recommandations associées :

Utilisez JS natif pour encapsuler les événements Tap afin de résoudre le délai de 300 ms sur les terminaux mobiles

Détails les bases de JavaScript mobile événements et un résumé des bibliothèques d'événements couramment utilisées

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!