移动端js触摸事件详解

在移动开发中，一种较为容易的做法是，先在桌面上开始原型设计，然后再在打算要支持的设备上处理移动特有的部分。多点触摸正是难以在PC上进行测试的那些功能之一，因为大部分的PC都没有触摸输入。 

不得不在移动设备上进行的测试有可能会拉长你的开发周期，因为你所做的每项改变都需要提交代码到服务器上，接着再加载到设备上。然后，一旦运行后，对应用也就没有太多的调试了，因为平板电脑和智能手机都很缺乏web开发者所用的工具。

这个问题的一个解决方案是在开发机器上模拟触发事件。对于单点触摸，触摸事件可以基于鼠标事件来模拟。如果你有触摸输入设备的话，比如说现代的App MacBook，那么多点触摸也可以被模拟。 

单点触摸事件 

如果你想在桌面上模拟单点触摸事件的话，试一下Phantom Limb，该程序在网页上模拟触摸事件并提供一只巨手来引导。
另外还有Touchable这一jQuery插件，该插件跨平台地统一了触摸和鼠标事件 

多点触摸事件 

为了能够让你的多点触摸web应用在你的浏览器或是多点触摸控板（比如说Apple MacBook或是MagicPad）上起作用，我创建了这一个MagicTouch.js填充工具，其捕捉来自触控板的触摸事件，然后把它们转换成标准兼容的触摸事件。 
1. 下载npTuioClient NPAPI插件并把它安装到~/Library/Internet Plug-Ins/目录下。 
2. 下载这一Mac MagicPad的TongSeng TUIO应用并启动这一服务器。 
3. 下载MagicTouch.js这一javascript库来基于npTuioClient回调模拟规范兼容的触摸事件。 
4. 以如下方式把magictouch.js脚本和npTuioClient插件包含到你的应用中： 

< head>
 
 ...
 
 < script src="/path/to/magictouch.js" kesrc="/path/to/magictouch.js">< /script>
 
< /head>
 
 
 
< body>
 
 ...
 
 < object id="tuio" type="application/x-tuio" style="width: 0px; height: 0px;">
 
 Touch input plugin failed to load!
 
 < /object>
 
< /body>

我只在Chrome 10上测试了这一方法，不过只要稍做调整它应该能够在其他的现代浏览器上工作。 

如果你的计算机没有多点触摸输入的话，你可以使用其他的TUIO跟踪器，比如说reacTIVision来模拟触摸事件。欲了解更多信息，请参阅TUIO项目页面。 

需要注意的一点是，你的手势可以是和OS层面的多点触摸手势相同的。在OS X上，你可以通过进入System Preferences中的Trackpad偏好设定版面来配置系统范围的事件。

随着多点触摸功能逐渐得到跨移动浏览器的的广泛支持，我非常高兴地看到新的web应用充分利用了这一丰富的API。

原文来源：html5rocks.com 
原文标题：Developing for Multi-Touch Web Browsers

一、手机上的触摸事件

基本事件：

touchstart //手指刚接触屏幕时触发 
touchmove //手指在屏幕上移动时触发 
touchend //手指从屏幕上移开时触发

下面这个比较少用：touchcancel //触摸过程被系统取消时触发 

每个事件都有以下列表，比如touchend的targetTouches当然是 0 咯：

touches //位于屏幕上的所有手指的列表
targetTouches //位于该元素上的所有手指的列表
changedTouches //涉及当前事件的所有手指的列表 

每个事件有列表，每个列表还有以下属性：

其中坐标常用pageX,pageY： 

pageX //相对于页面的 X 坐标 
pageY //相对于页面的 Y 坐标 
clientX //相对于视区的 X 坐标 
clientY //相对于视区的 Y 坐标 
screenX //相对于屏幕的 X 坐标 
screenY //相对于屏幕的 Y 坐标
identifier // 当前触摸点的惟一编号 
target //手指所触摸的 DOM 元素  

其他相关事件：
event.preventDefault（） //阻止触摸时浏览器的缩放、滚动条滚动 
var supportTouch = "createTouch" in document //判断是否支持触摸事件

二、示例

以下是获取不同类型滑动的代码具体做法，结合前人的思想，封装好了，可以借鉴学习：

var touchFunc = function(obj,type,func) { 
 //滑动范围在5x5内则做点击处理，s是开始，e是结束 
 var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0}; 
 var sTime = 0, eTime = 0; 
 type = type.toLowerCase();
 
 
 obj.addEventListener("touchstart",function(){ 
  sTime = new Date().getTime(); 
  init.sx = event.targetTouches[0].pageX; 
  init.sy = event.targetTouches[0].pageY; 
  init.ex = init.sx; 
  init.ey = init.sy; 
  if(type.indexOf("start") != -1) func(); 
 }, false);
 
 obj.addEventListener("touchmove",function() { 
  event.preventDefault();//阻止触摸时浏览器的缩放、滚动条滚动 
   init.ex = event.targetTouches[0].pageX; 
  init.ey = event.targetTouches[0].pageY; 
  if(type.indexOf("move")!=-1) func(); 
 }, false);
 
 obj.addEventListener("touchend",function() { 
  var changeX = init.sx - init.ex; 
  var changeY = init.sy - init.ey;
   if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) { 
   //左右事件 
   if(changeX > 0) { 
    if(type.indexOf("left")!=-1) func(); 
   }else{ 
    if(type.indexOf("right")!=-1) func();
 
   } 
  } 
  else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){ 
   //上下事件 
   if(changeY > 0) {
     if(type.indexOf("top")!=-1) func(); 
   }else{ 
    if(type.indexOf("down")!=-1) func(); 
   } 
  }
 
  else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){ 
   eTime = new Date().getTime();
    //点击事件，此处根据时间差细分下 
   if((eTime - sTime) > 300) { 
    if(type.indexOf("long")!=-1) func(); //长按
    }
    else {
     if(type.indexOf("click")!=-1) func(); //当点击处理
    }
   } 
  if(type.indexOf("end")!=-1) func(); 
 }, false); 
}; 

转载的文章：手机触摸屏的JS事件

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

上篇文章我们讲了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 放缩的值

转载文章：JavaScript触摸与手势事件

iOS版Safari为了向开发人员传达一些特殊信息，新增了一些专有事件。因为iOS设备既没有鼠标也没有键盘，所以在为移动Safari开发交互网页时，常规的鼠标和键盘事件根本不够用。随着Android中的WebKit的加入，很多这样的专有事件变成了事实标准。 

1.触摸事件

包含iOS2.0软件的iPhone 3G发布时，也包含了一个新版本的Safari浏览器。这款新的移动Safari提供了一些与触摸(touch)操作相关的新事件。后来,Android上的浏览器也实现了相同的事件。触摸事件会在用户手指放在屏幕上面时、在屏幕上滑动时或从屏幕上移开时触发。具体来说，有以下几个触摸事件。 

touchstart:当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发。 
touchmove:当手指在屏幕上滑动时连续的触发。在这个事件发生期间，调用preventDefault()可阻止滚动。 
touchend:当手指从屏幕上移开时触发。
touchcancel:当系统停止跟踪触摸时触发。关于此事件的确切触发事件，文档中没有明确说明。 

上面这几个事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但它们却是以兼容DOM的方式实现的。因此，每个触摸事件没有在DOM规范中定义，但它们却是以兼容DOM的方式实现的。因此，每个触摸事件的event对象都提供了在鼠标事件中常见的属性:bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。 

除了常见的DOM属性外，触摸事件还包含下列三个用于跟踪触摸的属性。 
touches:表示当前跟踪的触摸操作的Touch对象的数组。 
targetTouches:特定于事件目标的Touch对象的数组。 
changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。 

每个Touch对象包含下列属性。 
clientX:触摸目标在视口中的X坐标。 
clientY:触摸目标在视口中的Y坐标。 
identifier：表示触摸的唯一ID。 
pageX：触摸目标在页面中的x坐标。 
pageY：触摸目标在页面中的y坐标。 
screenX:触摸目标在屏幕中的x坐标。 
screenY:触摸目标在屏幕中的y坐标。 
target:触摸的DOM节点坐标。 

使用这些属性可以跟踪用户对屏幕触摸操作。来看下面的例子。

 function handleTouchEvent(event) { 
 //只跟踪一次触摸 
 if (event.touches.length == 1) { 
 var output = document.getElementById("output"); 
 switch (event.type) { 
 case "touchstart": 
 output.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; 
 break; 
 case "touchend": 
 output.innerHTML += "<br>Touch ended (" + event.changedTouches[0].clientX + "," + event.changeTouches[0].clientY + ")";
 break; 
 case "touchmove": 
 event.preventDefault(); //阻止滚动 
 output.innerHTML += "<br>Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")"; 
 break;
 
 }
 
 }
 
}
document.addEventListener("touchstart", handleTouchEvent, false);
document.addEventListener("touchend", handleTouchEvent, false); 
document.addEventListener("touchmove", handleTouchEvent, false); 

以上代码会跟踪屏幕上发生的一次触摸操作。为简单起见，只会在有一次活动触摸操作的情况下输出信息。当touchstart事件发生时。会将触摸的位置信息输出到 

元素中。当touchmove事件发生时，会取消其默认行为，阻止滚动（触摸移动的默认行为是滚动页面），然后输出触摸操作的变化信息。而touched事件则会输出有关触摸操作的最终信息。注意，在touched事件发生时，touched集合中就没有任何Touch对象了，因为不存在活动的触摸操作;此时，就必须转而使用changeTouchs集合。 

这些事件会在文档的所有元素上面触发，因而可以分别操作页面的不同部分。在触摸屏幕上的元素时，这些事件发生的数序如下： 
touchstart 
mouseover 
mousemove 
mousedown 
mouseup 
click
 touchend 

支持触摸事件的浏览器包括iOS版Safari、Android版WebKit、beta版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1和LG专有OS中的phantom浏览器。目前只有IOS版Safari支持多点触屏。桌面版Firefox 6+和Chrome也支持触摸事件。 

2.手势事件 

IOS 2.0中的Safari还引入了一组手势事件。当两个手指触摸屏幕时就会产生手势，手势通常会改变显示项的大小，或者旋转显示项。有三个手势事件，分别如下。 
gesturestart:当一个手指已经按在屏幕上面另一个手指有触摸屏幕时触发。 
gesturechange:当触摸屏幕的任何一个手指的位置发生变化时触发。 
gestureend:当任何一个手指从屏幕上面移开时触发。 

只有两个手指都触摸到事件的接收容器时才会触发这些事件。在一个元素上设置事件处理程序，意味着两个手指必须同时位于该元素的范围之内，才能触发手势事件（这个元素就是目标）。由于这些事件冒泡，所以将事件处理程序放在文档上也可以处理所有手势事件。此时，事件的目标就是两个手指都位于其范围内的那个元素。 

触摸事件和手势事件之间存在某种关系。当一个手指放在屏幕上时，会触发touchstart事件。如果另一个手指又放在了屏幕上，则会先触发gesturestart事件。如果另一个手指又放在了屏幕上，则会先触发gesturestart事件，随后触发基于该手指的touchstart事件。如果一个或两个手指在屏幕上滑动，将会触发gesturechange事件，但只要有一个手指移开，就会触发gestureend事件，紧接着又会触发基于该手指的touchend事件。 

与触摸事件一样，每个手势事件的event对象都包含着标准的鼠标事件属性：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。此外，还包含两个额外的属性：rotation和scale。其中,rotation属性表示手指变化引起的旋转角度，负值表示逆时针旋转，正值表示顺时针旋转（该值从0开始）。而scale属性表示两个手指间距的变化情况（例如向内收缩会缩短距离）;这个值从1开始，并随距离拉大而增长，随距离缩减而减小。 

下面是使用手势事件的一个示例： 

function handleGestureEvent(event) { 
 var output = document.getElementById("output"); 
 switch(event.type) {
 case "gesturestart": 
 output.innerHTML = "Gesture started (rotation=" + event.ratation +",scale=" + event.scale + ")"; 
 break;
 case "gestureend": 
 output.innerHTML += "<br>Gesture ended (rotation+" + event.rotation + ",scale=" + event.scale + ")"; 
 break; 
 case "gesturechange": 
 output.innerHTML += "<br>Gesture changed (rotation+=" + event.rotation + ",scale+" + event.scale + ")"; 
 break; 
 } 
}
 
document.addEventListener("gesturestart", handleGestureEvent, false); 
document.addEventListener("gestureend", handleGestureEvent, false); 
document.addEventListener("gesturechange", handleGestureEvent, false); 

与前面演示触摸事件的例子一样，这里的代码只是将每个事件都关联到同一个函数中，然后通过该函数输出每个事件的相关信息。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

最新评论