interface Web
js tutoriel
Événements tactiles dans le développement web mobile (tutoriel détaillé)
Événements tactiles dans le développement web mobile (tutoriel détaillé)
Ci-dessous, je partagerai avec vous une explication détaillée d'exemples d'événements tactiles dans le développement Web mobile. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.
Mots précédents
Afin de transmettre des informations spéciales aux développeurs, Safari pour iOS a ajouté de nouveaux événements exclusifs. Étant donné que les appareils iOS ne disposent ni de souris ni de clavier, les événements de souris et de clavier classiques ne suffisent tout simplement pas lors du développement de pages Web interactives pour Safari mobile. Avec l'ajout de WebKit dans Android, bon nombre de ces événements propriétaires sont devenus des standards de facto, ce qui a conduit le W3C à commencer à développer la spécification Touch Events. Cet article présentera en détail l'événement tactile mobile
Vue d'ensemble
Lorsque l'iPhone 3G contenant le logiciel iOS 2.0 est sorti, il incluait également une nouvelle version du navigateur Safari. . Ce nouveau Safari mobile propose de nouveaux événements liés aux opérations tactiles. Plus tard, les navigateurs sur Android ont implémenté le même événement. Les événements tactiles sont déclenchés lorsque l'utilisateur place son doigt sur l'écran, le fait glisser sur l'écran ou l'éloigne de l'écran. Plus précisément, il existe les événements tactiles suivants
touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发 touchmove:当手指在屏幕上滑动时连续地触发。在这个事件发生期间，调用preventDefault()可以阻止滚动 touchend:当手指从屏幕上移开时触发 touchcancel:当系统停止跟踪触摸时触发(不常用)。关于此事件的确切触发时间，文档中没有明确说明
[touchenter et touchleave]
Les spécifications des événements tactiles incluaient autrefois les événements touchenter et touchleave. Ces deux événements se produisent lorsque le doigt de l'utilisateur se déplace vers ou. Lancé lorsqu'un élément est supprimé. Mais ces deux événements ne se sont jamais réalisés. Microsoft propose des événements alternatifs pour ces deux événements, mais seul IE les prend en charge. Dans certains cas, il est très utile de savoir si le doigt de l'utilisateur glisse dans et hors d'un élément, j'espère donc que ces deux événements pourront revenir à la norme
Dans les événements tactiles, ceux couramment utilisés sont touchstart, touchumove et Les trois événements de touchend correspondent aux événements de la souris comme suit
鼠标 触摸 mousedown touchstart mousemove touchmove mouseup touchend
[Note] Certaines versions de l'événement tactile sous le simulateur Chrome utilisent le gestionnaire d'événements de niveau DOM0 pour ajouter des événements non valides
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#test{height:200px;width:200px;background:lightblue;}
</style>
</head>
<body>
<p id="test"></p>
<script>
(function(){
var
stateMap = {
touchstart_index : 0,
touchmove_index : 0,
touchend_index : 0
},
elesMap = {
touch_obj: document.getElementById('test')
},
showIndex, handleTouch;
showIndex = function ( type ) {
elesMap.touch_obj.innerHTML = type + ':' + (++stateMap[type + '_index']);
};
handleTouch = function ( event ) {
showIndex( event.type );
};
elesMap.touch_obj.addEventListener('touchstart', function(event){handleTouch(event);});
elesMap.touch_obj.addEventListener('touchmove', function(event){handleTouch(event);});
elesMap.touch_obj.addEventListener('touchend', function(event){handleTouch(event);});
})();
</script>
</body>
</html>300 ms
Le problème des 300 ms fait référence à un intervalle de 300 ms entre un élément remplissant sa fonction et l'exécution d'un événement tactile. Par rapport aux événements tactiles, les événements de souris, les événements de focus, les comportements par défaut du navigateur, etc. ont tous un délai de 300 ms
【Cliquez via】
En raison de l'existence de 300 ms, cela provoquera des problèmes courants cliquez sur la question. Regardons d'abord l'exemple
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#test {position: absolute;top: 0;left: 0;opacity: 0.5;height: 200px;width: 200px;background: lightblue;}
</style>
</head>
<body>
<a href="https://baidu.com">百度</a>
<p id="test"></p>
<script>
(function () {
var
elesMap = {
touchObj: document.getElementById('test')
},
fnHide, onTouch;
fnHide = function (type) {
elesMap.touchObj.style.display = 'none';
};
onTouch = function (event) {
fnHide();
};
elesMap.touchObj.addEventListener('touchstart', function(event){onTouch(event);});
})();
</script>
</body>
</html>Après avoir cliqué sur le p translucide bleu clair (déclenchant l'événement tactile), si la position du clic est juste au-dessus du lien, le comportement par défaut du saut de lien sera déclenché. L'explication détaillée est qu'après avoir cliqué sur la page, le navigateur enregistrera les coordonnées de la page cliquée, et 300 ms plus tard, l'élément sera retrouvé à ces coordonnées. Déclenchez le comportement du clic sur cet élément. Par conséquent, si l’élément supérieur de la même coordonnée de page disparaît dans les 300 ms, un comportement de clic sera déclenché sur l’élément inférieur 300 ms plus tard. Cela provoque un problème de clic
Ce problème se produit car le comportement de toucher l'écran est surchargé. Au moment où un doigt touche l'écran, le navigateur ne peut pas prédire si l'utilisateur appuie, double-clique, glisse, maintient ou toute autre opération. La seule chose sûre à faire est d'attendre un peu et de voir ce qui se passe ensuite
Le problème est le double-tap. Même si le navigateur détecte que le doigt a été retiré de l'écran, il n'a toujours aucun moyen de savoir quoi faire ensuite. Parce que le navigateur n'a aucun moyen de savoir si le doigt reviendra à l'écran ou s'il finira par déclencher l'événement Tap et la cascade d'événements. Pour le déterminer, le navigateur doit attendre un court laps de temps. Les développeurs de navigateurs ont trouvé un intervalle de temps optimal, qui est de 300 millisecondes
[Solution]
1 Ajoutez un délai de 300 ms dans le gestionnaire d'événement de l'événement tactile
(function () {
var
elesMap = {
touchObj: document.getElementById('test')
},
fnHide, onTouch;
fnHide = function (type) {
elesMap.touchObj.style.display = 'none';
};
onTouch = function (event) {
setTimeout(function(){
fnHide();
},300);
};
elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); });
})();. 2. Utilisez l'animation d'assouplissement et ajoutez un effet de transition de 300 ms. Notez que l'attribut d'affichage ne peut pas utiliser la transition
3 Ajoutez l'élément dom dans la couche intermédiaire pour permettre à la couche intermédiaire d'accepter l'événement de pénétration et de le masquer plus tard. 🎜>
4. Les niveaux supérieur et inférieur utilisent des événements tap, mais le comportement par défaut est inévitable5 L'événement touchstart sur le document empêche le comportement par défaut.document.addEventListener('touchstart',function(e){
e.preventDefault();
})a.addEventListener('touchstart',function(){
window.location.href = 'https://cnblogs.com';
})el.addEventListener('touchstart',function(e){
e.stopPropagation();
})[Informations de base]L'objet événement de chaque événement tactile fournit des attributs communs dans les événements de souris, notamment le type d'événement, l'objet cible de l'événement, le bouillonnement d'événement, le flux d'événements, le comportement par défaut, etc.
Prendre touchstart à titre d'exemple, l'exemple de code est le suivant
<script>
(function () {
var
elesMap = {
touchObj: document.getElementById('test')
},
onTouch;
onTouch = function (e) {
console.log(e)
};
elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); });
})();
</script>//当前目标 currentTarget:[object HTMLpElement] //实际目标 target:[object HTMLpElement] //实际目标 srcElement:[object HTMLpElement]
//事件流 eventPhase: 2 //可冒泡 bubbles: true //默认事件可取消 cancelable: true
除了常见的DOM属性外，触摸事件对象有一个touchList数组属性，其中包含了每个触摸点的信息。如果用户使用四个手指触摸屏幕，这个数组就会有四个元素。一共有三个这样的数组
1、touches：当前触摸屏幕的触摸点数组（至少有一个触摸在事件目标元素上）
2、changedTouches ：导致触摸事件被触发的触摸点数组
3、targetTouches：事件目标元素上的触摸点数组
如果用户最后一个手指离开屏幕触发touchend事件，这最后一个触摸点信息不会出现在targetTouches和touches数组中，但是会出现在changedTouched数组中。因为是它的离开触发了touchend事件，所以changedTouches数组中仍然包含它。上面三个数组中，最常用的是changedTouches数组
(function () {
var
elesMap = {
touchObj: document.getElementById('test')
},
onTouch;
onTouch = function (e) {
elesMap.touchObj.innerHTML = 'touches:' + e.touches.length
+ '<br>changedTouches:' + e.changedTouches.length
+ '<br>targetTouches:' + e.targetTouches.length;
};
elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); });
})();【事件坐标】
上面这些触摸点数组中的元素可以像普通数组那样用数字索引。数组中的元素包含了触摸点的有用信息，尤其是坐标信息。每个Touch对象包含下列属性
clientx:触摸目标在视口中的x坐标 clientY:触摸目标在视口中的y坐标 identifier:标识触摸的唯一ID pageX:触摸目标在页面中的x坐标（包含滚动） pageY:触摸目标在页面中的y坐标（包含滚动） screenX:触摸目标在屏幕中的x坐标 screenY:触摸目标在屏幕中的y坐标 target:触摸的DOM节点目标
changedTouches数组中的第一个元素就是导致事件触发的那个触摸点对象(通常这个触摸点数组不包含其他对象)。这个触摸点对象含有clientX/Y和pageX/Y坐标信息。除此之外还有screenX/Y和x/y，这些坐标在浏览器间不太一致，不建议使用
clientX/Y和pageX/Y的区别在于前者相对于视觉视口的左上角，后者相对于布局视口的左上角。布局视口是可以滚动的
(function () {
var
elesMap = {
touchObj: document.getElementById('test')
},
onTouch;
onTouch = function (e) {
var touch = e.changedTouches[0];
elesMap.touchObj.innerHTML = 'clientX:' + touch.clientX + '<br>clientY:' + touch.clientY
+ '<br>pageX:' + touch.pageX + '<br>pageY:' + touch.pageY
+ '<br>screenX:' + touch.screenX + '<br>screenY:' + touch.screenY
};
elesMap.touchObj.addEventListener('touchstart', function (event) { onTouch(event); });
})();上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
在angularjs中使用$http实现异步上传Excel文件方法
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!
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
AI Hentai Generator
Générez AI Hentai gratuitement.
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Le dossier appdata peut-il être déplacé vers le lecteur D ?
Feb 18, 2024 pm 01:20 PM
Le dossier appdata peut-il être déplacé vers le lecteur D ? Avec la popularité croissante de l'utilisation de l'ordinateur, de plus en plus de données personnelles et d'applications des utilisateurs sont stockées sur l'ordinateur. Dans le système d'exploitation Windows, il existe un dossier spécifique appelé dossier appdata, qui est utilisé pour stocker les données d'application de l'utilisateur. De nombreux utilisateurs se demandent si ce dossier peut être déplacé vers le lecteur D ou d'autres disques pour des raisons de gestion des données et de sécurité. Dans cet article, nous discuterons de ce problème et proposerons quelques solutions. Tout d'abord, laissez-moi
Comparaison du framework de développement Web Python : Django vs Flask vs FastAPI
Sep 28, 2023 am 09:18 AM
Comparaison des frameworks de développement Web Python : DjangovsFlaskvsFastAPI Introduction : Dans Python, un langage de programmation populaire, il existe de nombreux excellents frameworks de développement Web parmi lesquels choisir. Cet article se concentrera sur la comparaison de trois frameworks Web Python populaires : Django, Flask et FastAPI. En comparant leurs fonctionnalités, leurs scénarios d'utilisation et leurs exemples de code, il aide les lecteurs à mieux choisir le framework qui répond aux besoins de leur projet. 1. Django
Batterie négative au silicium de 6000 mAh ! La mise à niveau du Xiaomi 15Pro a encore fuité
Jul 24, 2024 pm 12:45 PM
Selon les informations du 23 juillet, le blogueur Digital Chat Station a annoncé que la capacité de la batterie du Xiaomi 15 Pro a été augmentée à 6 000 mAh et prend en charge une charge flash filaire de 90 W. Ce sera le modèle Pro avec la plus grande batterie de la série numérique de Xiaomi. Digital Chat Station a précédemment révélé que la batterie du Xiaomi 15Pro a une densité énergétique ultra-élevée et que la teneur en silicium est bien supérieure à celle des produits concurrents. Après que les batteries à base de silicium aient été testées à grande échelle en 2023, les batteries à anode en silicium de deuxième génération ont été identifiées comme l'orientation future du développement de l'industrie. Cette année marquera le pic de la concurrence directe. 1. La capacité théorique en grammes du silicium peut atteindre 4200 mAh/g, soit plus de 10 fois la capacité en grammes du graphite (la capacité théorique en grammes du graphite est de 372 mAh/g). Pour l'électrode négative, la capacité lorsque la quantité d'insertion d'ions lithium atteint le maximum est la capacité théorique en grammes, ce qui signifie que sous le même poids
Arrêtez ou autorisez ce PC à accéder à votre appareil mobile sous Windows 11
Feb 19, 2024 am 11:45 AM
Microsoft a changé le nom de PhoneLink en MobileDevice dans la dernière version de Windows 11. Ce changement permet aux utilisateurs de contrôler l'accès de l'ordinateur aux appareils mobiles via des invites. Cet article explique comment gérer les paramètres de votre ordinateur qui autorisent ou refusent l'accès depuis les appareils mobiles. Cette fonctionnalité vous permet de configurer votre appareil mobile et de le connecter à votre ordinateur pour envoyer et recevoir des messages texte, contrôler des applications mobiles, afficher des contacts, passer des appels téléphoniques, afficher des galeries, etc. Est-ce une bonne idée de connecter votre téléphone à votre PC ? Connecter votre téléphone à votre PC Windows est une option pratique, facilitant le transfert de fonctions et de médias. Ceci est utile pour ceux qui doivent utiliser leur ordinateur lorsque leur appareil mobile n'est pas disponible.
Réinventer l'architecture : utiliser WordPress pour le développement d'applications Web
Sep 01, 2023 pm 08:25 PM
Dans cette série, nous verrons comment créer des applications Web à l’aide de WordPress. Bien qu'il ne s'agisse pas d'une série technique dans laquelle nous examinerons le code, nous abordons des sujets tels que les frameworks, les principes fondamentaux, les modèles de conception, l'architecture, etc. Si vous n'avez pas lu le premier article de la série, je vous le recommande ; cependant, pour les besoins de cet article, nous pouvons résumer l'article précédent comme suit : Bref, les logiciels peuvent être construits sur des frameworks, les logiciels peuvent étendre la base. . En termes simples, nous faisons la distinction entre framework et fondation, deux termes qui sont souvent utilisés de manière interchangeable dans les logiciels, même s'ils ne sont pas la même chose. WordPress est une fondation car c'est une application en soi. Ce n'est pas un cadre. Pour cette raison, lorsqu’il s’agit de WordPress
Le nouveau roi des FPS domestiques ! Le champ de bataille « Opération Delta » dépasse les attentes
Mar 07, 2024 am 09:37 AM
"Opération Delta" lancera aujourd'hui (7 mars) un test PC à grande échelle appelé "Codename: ZERO". Le week-end dernier, ce jeu a organisé un événement d'expérience flash mob hors ligne à Shanghai, et 17173 a également eu la chance d'être invité à participer. Ce test remonte à un peu plus de quatre mois depuis le dernier, ce qui nous rend curieux, quels nouveaux points forts et surprises l'Opération Delta apportera-t-elle en si peu de temps ? Il y a plus de quatre mois, j'ai expérimenté « l'Opération Delta » lors d'une séance de dégustation hors ligne et la première version bêta. A cette époque, le jeu n'ouvrait que le mode "Action Dangereuse". Pourtant, l’opération Delta était déjà impressionnante pour l’époque. Dans un contexte où les grands constructeurs se ruent sur le marché du jeu mobile, un tel FPS comparable aux standards internationaux
Quels sont les avantages et les inconvénients du C++ par rapport aux autres langages de développement web ?
Jun 03, 2024 pm 12:11 PM
Les avantages du C++ dans le développement Web incluent la vitesse, les performances et l'accès de bas niveau, tandis que les limites incluent une courbe d'apprentissage abrupte et des exigences de gestion de la mémoire. Lors du choix d'un langage de développement Web, les développeurs doivent tenir compte des avantages et des limites du C++ en fonction des besoins des applications.
Mar 22, 2024 pm 03:03 PM
Récemment, Honor Mobile a organisé une conférence de lancement de nouveau produit et a officiellement lancé le Honor Magic6RSR Porsche Design. Le 22 mars, CNMO a appris que le Honor Magic 6 RSR Porsche Design était officiellement lancé à la vente, avec seulement une version 24 Go + 1 To disponible pour 9 999 yuans. Honor Magic6 RSR adopte une apparence de design Porsche, inspirée des éléments classiques des super voitures de sport Porsche. Le design de la ligne arrière s'inspire du design de la ligne volante de Porsche, et le module de caméra adopte le design hexagonal emblématique, donnant au produit une sensation tridimensionnelle et dynamique distincte. De plus, le produit est disponible en deux couleurs, gris agate et rose glace, qui sont réglées par les maîtres originaux de Porsche, soulignant encore davantage la beauté unique de son design. En termes de technologie d'écran, Honor Magic6RSR maintient
