移动端事件有哪些:
触摸事件
手势事件
传感器事件
(后面两个兼容性不怎么样,因此重点就是触摸事件)
触摸事件:
touch 事件
pointer 事件
(PC端可能会使用jQuery做动画,移动端一般不会,基本都是使用css3做动画)
ontouchstart (必须在元素内部才能触发)
ontouchmove (元素内外都能触发)
ontouchend (元素内外都能触发)
ontouchcancel 触摸中断,多用于系统级处理,比如在触摸时突然接了个电话(一般几乎是用不上的)
推荐使用 addEventListener 来绑定事件,除非因为兼容性原因使用 on
touchwidth:200px;
height:200px;
background:pink;
margin:20px auto;
}
var box=document.getElementById("box");//box.ontouchstart=handleStart;
//box.ontouchmove=handleMove;
//box.ontouchend=handleEnd;
box.addEventListener("touchstart",handleStart,false);
box.addEventListener("touchmove",handleMove,false);
box.addEventListener("touchend",handleEnd,false);functionhandleStart(){
console.log("touchstart");
}functionhandleMove(){
console.log("touchmove");
}functionhandleEnd(){
console.log("touchend");
}
touch事件的event对象
比较重要的属性
type: "touchstart" 触发的事件
target: div#box.box 触摸的元素
changedTouches: TouchList {0: Touch, length: 1} 发生变化的触摸点
targetTouches: TouchList 目标元素上的触摸点
touches: TouchList {0: Touch, length: 1} 所有触摸点
touch}