Comment utiliser l'événement Point

Cette fois, je vais vous montrer comment utiliser les événements Point et quelles sont les précautions lors de l'utilisation des événements Point. Ce qui suit est un cas pratique, jetons un coup d'œil.

Avant-propos

Cet article est resté longtemps dans la boîte à brouillons car j'ai rencontré des problèmes connexes récemment, alors je l'ai réglé encore. Veuillez noter qu'il ne s'agit pas d'événements de pointeur CSS. Je ne dirai pas tout ci-dessous, jetons un œil à l’introduction détaillée.

Cause

À partir d'une nuit sombre et orageuse, quelqu'un a découvert que notre application Web commençait à apparaître dans le simulateur Chrome. une erreur est signalée, le message d'erreur est probablement le suivant.

VM1023:1 Uncaught TypeError : Impossible de lire la propriété '0' de undefined

Mais seul son navigateur a un problème, et cela n'a aucun impact sur la fonction In. l'esprit de ce problème ne peut pas être reproduit sur ma machine (enfin, j'étais assez occupé à l'époque). La priorité de ce problème n'était pas élevée, mais au bout d'un moment, quelqu'un a progressivement eu le dessus). même problème, alors j'ai commencé à prêter attention à ce problème.

Problème de positionnement

Le code a été rapidement localisé en fonction de la pile d'appels. Le code source a été localisé dans le code du composant écrit par un précédent. collègue, qui ressemble probablement à ceci :

dom.on('touchstart pointerdown', function (event) {
 /*部分业务代码*/
 var touch = event.touches[0]; //报错的地方
 /*部分业务代码*/
})

debug a constaté que l'événement pointdown a été déclenché parce que l'événement n'avait pas le champ touch, ce qui a amené à lever une exception . Mais cela fonctionnait bien avant. Se pourrait-il que l’API du navigateur ait changé ? Et je n’ai pas entendu parler de l’événement pointerdown. Que gère cet événement ? J'ai donc commencé mon parcours de recherche avec deux questions :

• Qu'est-ce que l'événement pointeur vers le bas

• Pourquoi des erreurs ont-elles soudainement commencé à éclater

Parlons des événements de pointeur

Vérifiez le problème le plus simple est de lire les documents officiels du W3C. Voici une brève explication de ma compréhension.

Diversification des formulaires de saisie des appareils

À l'ère du PC, nous interagissons avec l'écran via la souris. À l'heure actuelle, nous n'avons besoin de prendre en compte que les événements de la souris lors de la conception. le système. Mais de nos jours, de nombreux nouveaux appareils, tels que les smartphones et les tablettes, incluent d'autres méthodes de saisie, telles que le toucher et le stylet. Les fonctionnaires proposent également de nouveaux événements pour ces formulaires de saisie.

Mais pour les développeurs, c'est une chose très gênante, car cela signifie que vous devez adapter divers événements à votre page Web. Par exemple, si vous souhaitez dessiner des images en fonction du mouvement de l'utilisateur, vous devez le faire. être compatible Pour PC et téléphone mobile, votre code peut ressembler à ce qui suit

dom.addEventListener('mousemove',
 draw);
dom.addEventListener('touchmove',
 draw);

Et si vous avez besoin d'être compatible avec plus de périphériques d'entrée ? Par exemple, un stylet, auquel cas le code sera très compliqué. De plus, afin d'être compatible avec le code basé sur les événements de souris existant, de nombreux navigateurs déclencheront des événements de souris pour tous les types d'entrée (par exemple, mousemove est déclenché lorsque touchmove est déclenché. Je l'ai testé dans Chrome et il ne s'est pas déclenché, mais parce que il n'y a pas d'appareil, le stylet (la situation n'a pas été testée), ce qui entraînera également l'impossibilité de confirmer si l'événement est effectivement déclenché par la souris.

Comment être compatible avec plusieurs formulaires de saisie

Afin de résoudre cette série de problèmes, le W3C a défini un nouveau formulaire de saisie, à savoir le pointeur. Tout contact sur l'écran déclenché par une souris, un toucher, un stylet ou un autre périphérique de saisie compte comme un événement de pointeur.

Son API est très similaire aux événements de souris et est très simple à migrer. En plus de fournir des propriétés couramment utilisées pour les événements de souris, tels que clientX, cible, etc., il fournit également certaines propriétés pour d'autres périphériques d'entrée, tels que la pression, la surface de contact, l'angle d'inclinaison, etc., afin que les développeurs puissent utiliser les événements de pointeur. pour fournir toutes les entrées L'appareil développe ses propres fonctions !

Attributs fournis

L'événement pointeur fournit des attributs d'événement uniques

• pointerId : l'identifiant unique de l'événement pointeur actuel , identifie principalement la seule source d'entrée lors du multi-touch

• largeur : la largeur de la surface de contact

• hauteur : la surface de contact Hauteur

• pressure：接触的压力值，范围是0-1，对于不支持压力的硬件，比如鼠标，按压时该值必须为 0.5，否则为 0

• tiltX，titltY：手写笔的角度

• pointerType：事件类型，目前有 mouse，pen，touch，如果是无法探测的指针类型，则该值为空字符串

• isPrimary：用于标识是否是主指针，主要是在多点触控中生效，开发者也可以通过忽略非主指针的指针事件来实现单点触控。

如何确定主指针：

鼠标输入：一定是主指针

触摸输入：如果 pointerdown 触发时没有其他激活的触摸事件，isPrimary 为 true

手写笔输入：与触摸事件类似，pointerdown 触发时没有其他激活的 pointer 事件

相关事件

事件名称	作用
pointerover	与 mouseover 行为一致
pointerenter	与 mouseenter 行为一致
pointerdown	指针进入活动状态，比如触摸了屏幕，类似于 touchstart
pointermove	指针进行了移动
pointerup	指针取消活动状态，比如手指离开了屏幕，类似于 touchend
pointercancel	类似于 touchcancel
pointerout	指针离开元素边缘或者离开屏幕，类似于 mouseout
pointerleave	类似于 mouseleave
gotpointercapture	元素捕获到指针事件时触发
lostpointercapture	指针被释放时触发

可以看到，pointer 事件与已知的事件类型基本一致，但是有一点区别：在触摸屏上，我们可能会滑动屏幕来触发页面滚动，缩放或者刷新，对于 touch 事件，这时会触发 touchmove，但是对于 pointer 事件，当触发这些浏览器行为时，你却会接收到 pointercancel 事件以便于通知你浏览器已经接管了你的指针事件。

如何检测

首先，pointer 事件的支持程度已经很不错了，你可以使用 Pointer Events polyfill （本地下载）来进行兼容，也可以自行检测

if (window.PointerEvent) {
 // 支持
} else {
 // 不支持
}

导致问题的原因

这时候，对于本文一开始提到的问题就显而易见了，因为 point events 是没有 touches 这个属性的。那么我们还有两个问题。

为什么之前会用到 point events？

后来我看了下 zepto 的源码，在事件处理时是考虑到了 point event 的，同事之前写的代码大概是参考了 zepto 的事件系统。

为什么会突然爆发这个问题？

很简答，Chrome 55 开始支持这个 API，Chrome 具体的支持信息可以参考官方日志，至于怎么检测浏览器支持，可以参考上面的内容

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样使用Vue中字符串模板

如何处理Mac安装thrift因bison报错

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!