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 |
|
(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事件模型 | 处理多手指操作 |
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!