通过一次报错详细谈谈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 Tabs插件宿主IFRAMES
Jan 01 Javascript
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
JS模板实现方法
Apr 03 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
javascript断点调试心得分享
Apr 23 Javascript
只需五句话搞定JavaScript作用域(经典)
Jul 26 Javascript
js 将图片连接转换成base64格式的简单实例
Aug 10 Javascript
Javascript实现代码折叠功能
Aug 25 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
Sep 26 Javascript
vue 项目build错误异常的解决方法
Apr 22 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
Dec 25 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
php下一个阿拉伯数字转中文数字的函数
2007/07/16 PHP
PHP错误和异长常处理总结
2014/03/06 PHP
php的memcache类分享(memcache队列)
2014/03/26 PHP
destoon实现调用自增数字从1开始的方法
2014/08/21 PHP
php绘制圆形的方法
2015/01/24 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
PHP批量删除jQuery操作
2017/07/23 PHP
JQuery each()嵌套使用小结
2014/04/18 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
基于vue实现swipe分页组件实例
2017/05/25 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
发布你的Python模块详解
2016/09/15 Python
使用Python轻松完成垃圾分类(基于图像识别)
2019/07/09 Python
python实现批量文件重命名
2019/10/31 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
彻底解决pip下载pytorch慢的问题方法
2021/03/01 Python
HTML5学习笔记之History API
2015/02/26 HTML / CSS
凯特方迪化妆品官网:Kat Von D Beauty
2016/11/15 全球购物
SteelSeries赛睿官网:游戏外设和配件的领先制造商(耳机、键盘、鼠标和鼠标垫)
2018/06/17 全球购物
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
学前教育专业毕业生自荐信
2013/10/03 职场文书
手工社团活动方案
2014/02/17 职场文书
2014年国培研修感言
2014/03/09 职场文书
副总经理岗位职责
2014/03/16 职场文书
大学生活动总结怎么写
2014/04/29 职场文书
新闻传播专业求职信
2014/07/22 职场文书
副主任竞聘演讲稿
2014/08/18 职场文书
担保书格式
2015/01/20 职场文书
怎样写离婚协议书
2015/01/26 职场文书
出纳2015年度工作总结范文
2015/10/14 职场文书
python通过opencv调用摄像头操作实例分析
2021/06/07 Python
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript