移动端js触摸事件详解(2)

1.touchstart: // 手指放到屏幕上的时候触发  
    2.touchmove: // 手指在屏幕上移动的时候触发  
    3.touchend: // 手指从屏幕上拿起的时候触发  
    4touchcancel: // 系统取消touch事件的时候触发。至于系统什么时候会取消,不详 

属性 

1.client / clientY:// 触摸点相对于浏览器窗口viewport的位置  
    2.pageX / pageY:// 触摸点相对于页面的位置  
    3.screenX /screenY:// 触摸点相对于屏幕的位置  
    4.identifier: // touch对象的unique ID 

//touchstart事件 function touchSatrtFunc(e) { //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等 var touch = e.touches[0]; //获取第一个触点 var x = Number(touch.pageX); //页面触点X坐标 var y = Number(touch.pageY); //页面触点Y坐标 //记录触点初始位置 startX = x; startY = y; } //touchmove事件 function touchMoveFunc(e) { //evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等 var touch = evt.touches[0]; //获取第一个触点 var x = Number(touch.pageX); //页面触点X坐标 var y = Number(touch.pageY); //页面触点Y坐标 var text = 'TouchMove事件触发:(' + x + ', ' + y + ')'; //判断滑动方向 if (x - startX != 0) { //左右滑动 } if (y - startY != 0) { //上下滑动 } }

转载的第二篇文章:Mobile Web前端开发系列: 事件处理(二)

上篇文章我们讲了html的基本事件,这篇文章我们着重讲解下触摸事件,触摸事件触发的条件是手指接触屏幕、手指在屏幕上移动或者从屏幕上离开。 事件是触摸的集合,它起始于手指初次放置在屏幕上,终止于最后一个手指离开屏幕。事件从开始到结束过程中的所有触摸操作都存储在相同事件的记录中。 

touch事件 

touch事件可以分为单点触摸和多点触摸两种,单点触摸高端机一般都支持,Safari2.0、Android3.0以上的版本支持多点触摸,支持最多5个手指同时触摸屏幕,ipad最多支持11个手指同时触摸屏幕, 我们可以采用以下的事件模型捕获这些事件: 
ontouchstart ontouchmove ontouchend ontouchcancel 

当用户按下手指在屏幕上,ontouchstart会被触发,当用户移动一个或多个手指的时候,ontouchmove会被触发,当用户移走手指, ontouchend被触发。那什么时候触发ontouchcancel呢?当一些更高级别的事件发生的时候,例如,alert,有电话打来或者有 推送的消息提示的时候会取消当前的touch操作,即触发ontouchcancel。当你在开发一个web game的时候,ontouchcancel 对你很重要,你可以在ontouchcancel触发的时候暂停游戏或者保存游戏。 

gesture事件 

gesture事件的运行原理与touch事件相同,只是gesture事件仅当屏幕上存在至少两个手指时触发,所以Safari2.0、Android3.0以上版本支持, 手势具备诸多优势,可以帮助我们测量两指放缩和旋转操作,事件模型如下:
ongesturestart ongesturechange ongestureend 

事件属性 

无论使用触摸还是手势事件,你都需要将这些事件转换为单独的触摸来使用它们。为此,你需要访问事件对象的一系列的属性。 

targetTouches 目标元素的所有当前触摸 changedTouches 页面上最新更改的所有触摸 touches 页面上的所有触摸 

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wzjfdd.html