在移动端开发中,现有的手势事件只有IOS上的浏览器支持,因此对其他设备上的浏览器手势事件我们必须在移动端的touchstart、toucmove、touchend事件上进行改造升级,下面就介绍下升级改造的移动端的手势事件。
移动端触摸事件(基础事件)
touchstart— 触摸开始
touchmove— 触摸移动
touchend— 触摸结束
touchcancel— 触摸中断(在触摸过程中被打断,如弹框)
box.addEventListener(‘touchmove’,function (event) {
console.log(‘触摸移动’);
}
touchEvent对象
touches—触发事件时屏幕上的触点个数
targetTouches—触发事件时事件元素上的触点个数
changedTouches—触发事件发生改变的触点个数
target —事件元素
stopPropagation() —阻止事件冒泡
preventDefault() —阻止默认行为
touchlist对象
touchEvent对象的集合,类数组对象;
targetTouches、touches、changedTouches属性返回的都是touchlist对象
touch对象
clientX/clientY—触点在视口上的位置
pageX/pageY—触点在页面上的位置
screenX/screenY—触点在屏幕上的位置
box.addEventListener(‘touchstart’,function (event) {
console.log(event.touches); //一个手指触摸时输出 Touchlist{0:Touch,length:1}
var startX = event.touches[0].clientX; //触点在视口上的位置
}
手势事件
IOS的手势事件
1.1 事件
gesturestart—手势开始,手指触碰当前元素,屏幕上有两个或者两个以上的手指
gesturechange—手势变化,手指触碰当前元素,屏幕上有两个或者两个以上的手指位置在发生移动
<