Maison > interface Web > js tutoriel > le corps du texte

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

php是最好的语言
Libérer: 2018-08-07 10:10:31
original
5189 Les gens l'ont consulté

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">
Copier après la connexion

(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 );
Copier après la connexion

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

$(function() {    
    FastClick.attach(document.body);    
});
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!