포인트 이벤트 이용방법

이번에는 포인트 이벤트 사용법과 포인트 이벤트 사용 시 주의사항에 대해 알려드리겠습니다. 다음은 실제 사례로 살펴보겠습니다.

머리말

이 글은 오랫동안 초안 상자에 누워 있었습니다. 최근에 관련된 문제가 발생해서 다시 정리했습니다. 이것은 CSS 포인터 이벤트에 관한 것이 아닙니다. 아래에서 모든 것을 말하지는 않겠습니다. 자세한 소개를 살펴 보겠습니다.

원인

어둡고 폭풍우가 몰아치는 밤부터 누군가 우리 웹 앱이 Chrome 시뮬레이터에서 오류를 보고하기 시작했다는 것을 발견했습니다. 오류 메시지는 아마도 다음과 같습니다.

VM1023:1 Uncaught TypeError: Cannot read property '0' of un Defined

하지만 그의 브라우저에만 문제가 있으며 내 컴퓨터에서 이를 반복하지 않는다는 점에서 기능에는 영향을 미치지 않습니다. 당시에는 꽤 바빴고) 이 문제의 우선순위는 높지 않았지만 시간이 지나면서 사람들이 점차 같은 문제를 안고 있었기 때문에 이 문제에 관심을 가지기 시작했습니다.

위치 문제코드는 호출 스택을 기반으로 빠르게 찾아냈습니다. 소스 코드는 이전 동료가 작성한 구성 요소 코드에 위치했는데 아마도 다음과 같습니다.

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

debug에서 포인트다운이 발견되었습니다. 이벤트가 이 필드에 닿지 않았기 때문에 이벤트가 트리거되어

예외가 발생했습니다

. 하지만 이전에는 잘 작동했습니다. 브라우저 API가 변경되었기 때문일까요? 그리고 포인터다운 이벤트에 대해 배운 적이 없습니다. 이 이벤트는 무엇을 처리하는 데 사용됩니까? 그래서 저는 두 가지 질문으로 검색 여정을 시작했습니다.

포인터다운 이벤트란 무엇입니까?
왜 갑자기 오류가 발생하기 시작합니까?

포인터 이벤트에 대해 이야기합시다문제를 확인하세요. 가장 쉬운 방법은 W3C의 공식 문서를 읽어보는 것입니다. 다음은 제가 이해한 간단한 설명입니다.

기기 입력 형식의 다양화

PC 시대에는 마우스를 통해 화면과 상호 작용합니다. 이때 시스템을 설계할 때 마우스 이벤트만 고려하면 됩니다. 하지만 요즘에는 스마트폰, 태블릿 등 터치나 스타일러스와 같은 다른 입력 방법을 포함하는 새로운 장치가 많이 등장하고 있으며, 관계자들은 이러한 입력 양식에 대한 새로운 이벤트도 제공하고 있습니다.

하지만 개발자에게는 이것이 매우 귀찮은 일입니다. 왜냐하면 웹 페이지에 다양한 이벤트를 적용해야 한다는 의미이기 때문입니다. 예를 들어 사용자의 움직임을 기반으로 그림을 그리려면 PC와 호환되어야 합니다. 코드는 다음과 같습니다

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

더 많은 입력 장치와 호환되어야 한다면 어떻게 해야 할까요? 예를 들어 스타일러스를 사용하면 코드가 매우 복잡해집니다. 게다가 기존 마우스 이벤트 기반 코드와의 호환성을 위해 많은 브라우저는 모든 입력 유형에 대해 마우스 이벤트를 트리거합니다(예를 들어 touchmove가 트리거되면 mousemove가 트리거됩니다. Chrome에서 테스트했는데 트리거되지 않았지만 왜냐하면 장치가 없고 스타일러스가 테스트되지 않았으므로 이벤트가 실제로 마우스에 의해 트리거되는지 확인할 수 없게 됩니다.

여러 입력 형식과 호환되는 방법

이런 일련의 문제를 해결하기 위해 W3C에서는 포인터라는 새로운 입력 형식을 정의했습니다. 마우스, 터치, 스타일러스 또는 기타 입력 장치에 의해 트리거된 화면의 모든 접촉은 포인터 이벤트로 계산됩니다.

API는 마우스 이벤트와 매우 유사하며 마이그레이션이 매우 쉽습니다. clientX, target 등과 같이 일반적으로 사용되는 마우스 이벤트 속성을 제공하는 것 외에도 압력, 접촉 표면, 기울기 각도 등과 같은 다른 입력 장치에 대한 일부 속성도 제공하므로 개발자가 포인터 이벤트를 사용할 수 있습니다. 모든 입력을 제공하기 위해 장치는 자체 기능을 개발합니다!

제공된 속성

pointer 이벤트는 몇 가지 고유한 이벤트 속성을 제공합니다.

pointerId: 현재 포인터 이벤트의 고유 식별자로, 주로 멀티 터치 중에 유일한 입력 소스를 식별합니다.
width: 너비 접촉면
height: 접촉면의 높이

• 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报错

위 내용은 포인트 이벤트 이용방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!