1、三个常用的移动端事件
ontouchstart 手指按下时触发
ontouchmove 手指移动时触发
ontouchend 手动抬起时触发
注意:这些事件当作事件属性使用时,不兼容谷歌浏览器。
解决方案是,使用 addEventListener()来注册这些移动端事件。
2、pc端事件和移动端事件的区别
1)通过 on的方式添加touch事件,在谷歌浏览器下无效。
2)pc端的鼠标事件,用在移动端使用时,会产生300毫秒的延迟。
3、移动事件对象 TouchEvent
TouchEvent对象,是一个标准事件对象,它默认是事件处理程序的第一个参数。它描述了touch事件发生时的详细信息。
获取手指信息:
touches 当前屏幕上的手指列表
targetTouches 当前元素上的手指列表
changedTouches 触发当前事件的手指列表
获取手指的个数:
e.changedTouches.length
相关坐标的获取:
e.pageX / e.pageY 手指触屏时到网页顶部/左侧的距离。
e.clientX / e.clientY 手指触屏时到窗口上侧/左侧的距离。
obj.offsetLeft / obj.offsetTop 对象到定位父级的left/top值。
获取触屏时坐标:
e.changedTouches[0].pageX / e.changedTouches[0].pageY
三个手指对象的区别:
在touchend时获取手指列表,只能用 changedTouches。原因是当手指抬起时,touches和targetTouches就没有了,所以只能用changedTouches来获取手指列表。
(未完待续)