同步自我的博客，迎接交换

这篇文章在草稿箱里躺了良久，由于近来又遇到了相干题目，因而又整理了一下。请注意这里讲的不是 css 的 pointer-events。

原由

从某个月黑风高的晚上最先，有人发明我们的 web-app 在 Chrome 模拟器里最先涌现报错，报错信息也许就是下面如许。

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

然则只要他的浏览器有题目，而且对功用毫无影响，本着在我的机械上不复现的精力（好吧，当时比较忙），这个题目的优先级排的不高，然则背面一段时间逐步有人也涌现雷同的题目，因而我最先在乎这个题目了。

定位题目

依据挪用栈很快定位到了代码，源码定位到之前一名同事写的组件代码，也许是如许的：

dom.on('touchstart  pointerdown', function (event) {
        /*部份营业代码*/
        
        var touch = event.touches[0]; //报错的处所
        
        /*部份营业代码*/
})

debug 发明是触发了 pointdown 事宜，由于 event 没有 touches 这个字段，致使抛出异常。然则之前用的好好的呀，岂非是浏览器的 API 变化了？而且我也没有相识过 pointerdown 事宜，这个事宜是用来处置惩罚什么的呢？因而我带着两个题目开启了搜刮之旅：

1. 什么是 pointerdown 事宜

2. 为何倏忽最先迸发毛病

聊聊 pointer events

查题目，最简朴的题目就是搂一遍 W3C 的官方文档了。这里简朴说下我的明白。

装备输入情势的多样化

在 PC 时期，我们经由过程鼠标与屏幕交互，这时候，我们设想体系时只须要斟酌鼠标事宜就好了。然则现在，有许多新的装备，比方智能手机，平板电脑，他们包含了其他的输入体式格局，比方触摸，手写笔，官方也为这些输入情势都供应了新的事宜。

然则关于开辟者来讲，这是件很贫苦的事，由于这意味着你须要为你的网页适配种种事宜，比方你要依据用户的挪动来绘图，你须要兼容 PC 和手机，你的代码能够就会是下面如许

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

假如须要兼容更多的输入装备呢？比方手写笔，如许的话代码就会很庞杂。而且，为了兼容现有的基于鼠标事宜的代码，许多浏览器都会为一切的输入范例触发鼠标事宜（例如在 touchmove 时触发 mousemove，我在 Chrome 实验了一下不会触发，然则由于没有装备，手写笔的状况没有试），这也会致使没法确认是不是真的是鼠标触发的事宜。

怎样兼容多种输入情势

为相识决这一系列的题目，W3C 定义了一种新的输入情势，即 pointer。任何由鼠标、触摸、手写笔或许其他输入装备在屏幕上触发的打仗，都算是 pointer 事宜。

它的 API 和鼠标事宜很像，异常轻易迁徙。除了供应鼠标事宜经常运用的属性，比方 clientX，target 等等，还供应了一些用于其他输入装备的属性，比方压力，打仗面，倾斜角度等等，如许开辟者就能够应用 pointer 事宜为一切的输入装备开辟本身的功用了！

供应的属性

pointer 事宜供应了一些特有的事宜属性

• pointerId：当前指针事宜的唯一标识，主如果在多点触控时标识唯一的一个输入源

• width：打仗面的宽度

• height：打仗面的高度

• pressure：打仗的压力值，局限是0-1，关于不支撑压力的硬件，比方鼠标，按压时该值必需为 0.5，否则为 0

• tiltX，titltY：手写笔的角度

• pointerType：事宜范例，现在有 mouse，pen，touch，假如是没法探测的指针范例，则该值为空字符串

• isPrimary：用于标识是不是是主指针，主如果在多点触控中见效，开辟者也能够经由过程疏忽非主指针的指针事宜来完成单点触控。
  怎样肯定主指针：

  • 鼠标输入：一定是主指针

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

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

相干事宜

能够看到，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 详细的支撑信息能够参考官方日记，至于怎样检测浏览器支撑，能够参考上面的内容

总结

1. 关于开辟来讲，一定要钻进去，任何 bug 都是有缘由的

2. 代码报错应该有响应的监控机制，让机械来帮我们发明题目，而不是靠人工去干涉干与

参考
https://www.w3.org/Submission…
https://developers.google.com…