1.触摸事件
1.三个触摸事件:
1.touchsatrt 当手指触摸屏幕的时候触发
2.touchmove 当手指在屏幕上滑动的时候连续触发 /
3.touchend 当手指离开的时候触发*/
2.添加事件方式
dom.addEventListener('touchstart',function(e){});
3.事件下ev相关的属性
4.事件返回的e对象包含那些移动端特有的属性:
changedTouches: 页面上最新更改的所有触摸 他是一个数组长度为一如果有无数个同时点他就会为2,3,4.。。。。。。。
targetTouches: 目标元素的所有当前触摸 只会包含目标元素之内的触摸点集合,之外的就不会包含在内了
touches: 页面上的所有触摸 包含目标元素内的和目标元素之外的
touchmove:当手指在屏幕上滑动时连续触发。
touchend:当手指离开屏幕时触发。他只会记录页面上最新更改的所有触摸也就是changedTouches
5. e.touches[0] 的重要坐标
注意:在touchend事件的时候event只会记录changedtouches
clientX:触摸目标在视口中的X坐标。(常用)
clientY:触摸目标在视口中的Y坐标。(常用)
pageX :触摸目标在页面中的x坐标。
pageY :触摸目标在页面中的y坐标。
screenX:触摸目标在屏幕中的x坐标。(不常用)
screenY:触摸目标在屏幕中的y坐标。(不常用)
2.过渡事件和动画事件
obj.addEventListener('transitionStart',function(e){});
//兼容性问题
obj.addEventListener('webkitTransitionEnd',function(e){});
obj.addEventListener('transitionEnd',function(e){});
obj.addEventListener('animationStart',function(e){});
//兼容性问题
obj.addEventListener('webkitAnimationStart',function(e){});
obj.addEventListener('animationEnd',function(e){});