同步自我的博客,迎接交换
这篇文章在草稿箱里躺了良久,由于近来又遇到了相干题目,因而又整理了一下。请注意这里讲的不是 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
事宜。
它的 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…
https://developers.google.com…