通过一次报错详细谈谈Point事件


Posted in Javascript onMay 17, 2018

前言

这篇文章在草稿箱里躺了很久,因为最近又遇到了相关问题,于是又整理了一下。请注意这里讲的不是 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 事件,这个事件是用来处理什么的呢?于是我带着两个问题开启了搜索之旅:

  • 什么是 pointerdown 事件
  • 为什么突然开始爆发错误

聊聊 pointer events

查问题,最简单的问题就是搂一遍 W3C 的官方文档了。这里简单说下我的理解。

设备输入形式的多样化

在 PC 时代,我们通过鼠标与屏幕交互,这时候,我们设计系统时只需要考虑鼠标事件就好了。但是如今,有很多新的设备,比如智能手机,平板电脑,他们包含了其他的输入方式,比如触摸,手写笔,官方也为这些输入形式都提供了新的事件。

但是对于开发者来说,这是件很麻烦的事,因为这意味着你需要为你的网页适配各种事件,比如你要根据用户的移动来画图,你需要兼容 PC 和手机,你的代码可能就会是下面这样

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

如果需要兼容更多的输入设备呢?比如手写笔,这样的话代码就会很复杂。而且,为了兼容现有的基于鼠标事件的代码,很多浏览器都会为所有的输入类型触发鼠标事件(例如在 touchmove 时触发 mousemove,我在 Chrome 试验了一下不会触发,但是因为没有设备,手写笔的情况没有试),这也会导致无法确认是否真的是鼠标触发的事件。

如何兼容多种输入形式

为了解决这一系列的问题,W3C 定义了一种新的输入形式,即 pointer。任何由鼠标、触摸、手写笔或者其他输入设备在屏幕上触发的接触,都算是 pointer 事件。

通过一次报错详细谈谈Point事件

它的 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 事件

相关事件

事件名称 作用
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 具体的支持信息可以参考官方日志,至于怎么检测浏览器支持,可以参考上面的内容

总结

对于开发来说,一定要钻进去,任何 bug 都是有原因的

代码报错应该有相应的监控机制,让机器来帮我们发现问题,而不是靠人工去干预

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

参考

  • https://www.w3.org/Submission/pointer-events/
  • https://developers.google.com/web/updates/2016/10/pointer-events
Javascript 相关文章推荐
jquery 使用点滴函数代码
May 20 Javascript
用按钮控制iframe显示的网页实现方法
Feb 04 Javascript
简约JS日历控件 实例代码
Jul 12 Javascript
原生js仿jq判断当前浏览器是否为ie,精确到ie6~8
Aug 30 Javascript
jQuery实现表单提交时判断的方法
Dec 13 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
php main 与 iframe 相互通讯类(js+php同域/跨域)
Sep 14 Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
Sep 06 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 Javascript
详解Nuxt内导航栏的两种实现方式
Apr 16 Javascript
AngularJS日期格式化常见操作实例分析
May 17 #Javascript
Node 升级到最新稳定版的方法分享
May 17 #Javascript
Angular实现模版驱动表单的自定义校验功能(密码确认为例)
May 17 #Javascript
AngularJS自定义过滤器用法经典实例总结
May 17 #Javascript
JS 实现分页打印功能
May 16 #Javascript
使用vue-cli导入Element UI组件的方法
May 16 #Javascript
JS 使用 window对象的print方法实现分页打印功能
May 16 #Javascript
You might like
PHP4.04简明安装
2006/10/09 PHP
ThinkPHP字符串函数及常用函数汇总
2014/07/18 PHP
php微信开发之带参数二维码的使用
2016/08/03 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
javascript打开word文档的方法
2014/04/16 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
js查看一个函数的执行时间实例代码
2015/09/12 Javascript
Javascript中神奇的this
2016/01/20 Javascript
javascript特殊日历控件分享
2016/03/07 Javascript
JS中判断null的方法分析
2016/11/21 Javascript
React Native中导航组件react-navigation跨tab路由处理详解
2017/10/31 Javascript
详解react-router 4.0 下服务器如何配合BrowserRouter
2017/12/29 Javascript
解决vue项目nginx部署到非根目录下刷新空白的问题
2018/09/27 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
js实现秒表计时器
2019/12/16 Javascript
基于Vue.js+Nuxt开发自定义弹出层组件
2020/10/09 Javascript
vue+vant 上传图片需要注意的地方
2021/01/03 Vue.js
python实现将pvr格式转换成pvr.ccz的方法
2015/04/28 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
Python实现中文数字转换为阿拉伯数字的方法示例
2017/05/26 Python
TF-IDF算法解析与Python实现方法详解
2017/11/16 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
tensorflow实现残差网络方式(mnist数据集)
2020/05/26 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
加拿大奢华时装品牌:Mackage
2018/01/10 全球购物
2014领导干部学习焦裕禄同志先进事迹思想汇报
2014/09/19 职场文书
三方股东合作协议书
2014/10/28 职场文书
革命电影观后感
2015/06/18 职场文书
python 安全地删除列表元素的方法
2022/03/16 Python
Go语言的协程上下文的几个方法和用法
2022/04/11 Golang