JavaScript触摸与手势事件

Posted 2020-09-26

处理Touch事件能让你跟踪用户的每一根手指的位置。你可以绑定以下四种Touch事件：

    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前端开发系列: 事件处理（二）

  (2012-08-07 15:16:42)

转载▼

标签：   杂谈

分类： webapp

上篇文章我们讲了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 页面上的所有触摸

changedTouches、targetTouches和touches分别包含稍微不同的触摸列表。targetTouches和touches分别包含当前位于 屏幕上的手指列表，但changedTouches仅列出最后发生的触摸。如果你在使用touchend或者gestureend事件，那么这个属性 非常重要。在这两种情况下，屏幕上都不会再出现手指，因此targetTouches和touches应该为空，但你仍然可以通过查看 changedTouches数组来了解最后发生的事情。

由于触摸属性都会生成数组，因此你可以使用javascript数组函数来访问它们。这意味着，event.touches[0]将返回第一次 触摸，并且可以使用event.touches.length来计算当前存储的触摸数量。

查看单独触摸时，通过使用event.targetTouches[0],你也可以访问其它触摸，每个触摸会包含一些具体信息，

clientX、clientY 相对于当前屏幕的X或Y位置 pageX、pageY 相对于整体页面的X或Y位置 screenX、screenY 相对于用户计算机屏幕的X或Y位置 identifier 事件的唯一标识符 target 生成触摸的目标对象

手势事件的事件对象会比普通触摸事件多两个属性，

rotation 手指的旋转角度 scale 放缩的值