How to use Point event-JS Tutorial-php.cn

This time I will show you how to use Point events, and what are the precautions for using Point events. The following is a practical case, let's take a look.

Preface

This article has been lying in the draft box for a long time. Because I encountered related problems recently, I sorted it out again. Please note that this is not about css pointer-events. I won’t say everything below, let’s take a look at the detailed introduction.

Cause

Starting from a dark and stormy night, someone discovered that our web-app began to appear in the Chrome simulator. When an error is reported, the error message is probably as follows.

VM1023:1 Uncaught TypeError: Cannot read property '0' of undefined

But only his browser has a problem, and it has no impact on the function. In the spirit of The spirit did not reappear on my machine (well, I was quite busy at the time). The

priority of this problem was not high, but after a while, someone gradually had the same problem, so I I started to pay attention to this issue.

Positioning problem

The code was quickly located based on the call stack, and the source code was located to the component code written by a previous colleague, which is probably like this of:

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

Copy after login

debug found that the pointdown event was triggered because the event did not touch the field, causing

to throw an exception. But it worked fine before. Could it be that the browser API has changed? And I haven’t learned about the pointerdown event. What is this event used to handle? So I started my search journey with two questions:

What is the pointerdown event
Why did errors suddenly start to occur

Let’s talk about pointer events

To check the problem, the simplest question is to read through the W3C official documents. Here is a brief explanation of my understanding.

Diversification of device input forms

In the PC era, we interact with the screen through the mouse. At this time, we only need to consider mouse events when designing the system. . But nowadays, there are many new devices, such as smartphones and tablets, which include other input methods, such as touch and stylus. Officials also provide new events for these input forms.

But for developers, this is a very troublesome thing, because it means that you need to adapt various events to your web page. For example, if you want to draw pictures based on the user's movement, you need to be compatible For PC and mobile phone, your code may be as follows

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

Copy after login

What if you need to be compatible with more input devices? For example, a stylus, in which case the code will be very complicated. Moreover, in order to be compatible with existing mouse event-based code, many browsers will trigger mouse events for all input types (for example, mousemove is triggered when touchmove is triggered. I tested it in Chrome and it did not trigger, but because there is no device, the stylus The situation has not been tested), which will also lead to the inability to confirm whether the event is actually triggered by the mouse.

How to be compatible with multiple input forms

In order to solve this series of problems, W3C defines a new input form, namely pointer. Any contact on the screen triggered by a mouse, touch, stylus, or other input device counts as a pointer event.

Its API is very similar to mouse events and is very easy to migrate. In addition to providing commonly used properties for mouse events, such as clientX, target, etc., it also provides some properties for other input devices, such as pressure, contact surface, tilt angle, etc., so that developers can use pointer events to provide all input The device develops its own functions!

Provided properties

The pointer event provides some unique event properties

pointerId: the unique identifier of the current pointer event , mainly to identify the only input source during multi-touch
width: the width of the contact surface
height: the contact surface high
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 {
 // 不支持
}

Copy after login

导致问题的原因

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

为什么之前会用到 point events？

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

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

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

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