首页 > 代码库 > html5之移动触屏事件

html5之移动触屏事件

HTML5的javascript touch事件

 HTML5+CSS3, javascript Add comments
282013

 

以下是几种普及得比较好的触摸事件,可以在绝大多数现代浏览器中来测试这一事件(必须是触屏设备): (on)touchstart:触摸开始的时候触发 (on)touchmove:手指在屏幕上滑动的时候触发 (on)touchend:触摸结束的时候触发 (on)touchcancel:系统取消touch事件的时候触发。例如电话接入或者弹出信息。一般用在游戏:玩着的时候,突然来电话了,就触发touchcancel事件暂停游戏、存档等操作。

而每个触摸事件都包括了三个触摸对象列表,每个列表里包含了对应的一系列触摸点(触摸对象,用来实现多点触控): touches:当前位于屏幕上的所有手指的列表。 targetTouches:位于当前DOM元素上手指的列表。 changedTouches:涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息(常用): identifier:一个数值,touch对象的unique ID ,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc) target:DOM元素,是动作所针对的目标。 client / clientY:触摸点相对于浏览器窗口viewport的位置,不包含滚动距离 pageX / pageY:触摸点相对于页面的位置,包含滚动距离 screenX /screenY:触摸点相对于屏幕的位置 radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持,好在功能不常用。 有了这些信息,就可以依据这些事件信息为用户提供不同的反馈了。

 Touch事件与Mouse事件的出发关系 在触屏操作后,手指提起的一刹那(即发生touchend后),系统会判断接收到事件的element的内容是否被改变, 如果内容被改变,会解析为touch事件,接下来的click事件都不会触发, 如果内容没有改变,则会解析为click事件,按照mousedown,mouseup,click的顺序触发事件。 特别需要提到的是,在解析为click事件时,只有再触发一个触屏事件时,才会触发上一个事件的mouseout事件。 因此有关于hover的小技巧,当点击过一个按钮之后,这个按钮就会一直处于hover的状态,此时基于这个伪类所设置的css也是起作用的,直到用手指点击另外一个地方,才会完成mouseout事件。

gesture事件(手势事件) 与touch事件相近,也用得很多的是gesture事件,这个事件将在下一篇讲到。

touch事件demo

<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
<div id="canvas">
 <div id="move"></div>
 </div>
<style>
 *{margin:0;padding:0;}
 html,body{ width:100%;height:100%;}
 #canvas{position:relative;width:100%;height:100%;}
 #move{position:absolute;width:100px;height:100px;background:#0F0;}
 .spirit {position:absolute;width:50px;height:50px;background-color:red;}
 </style>
<script>
 var canvas = document.getElementById("canvas");
 var spirit, startX, startY;
 var a = 1;
 // touch start listener
 function touchStart(event) {
 event.preventDefault();
 if (spirit ||! event.touches.length) return;
 var touch = event.touches[0];
 startX = touch.pageX;
 startY = touch.pageY;
 spirit = document.createElement("div");
 spirit.className = "spirit";
 spirit.style.left = startX - 50 + "px";
 spirit.style.top = startY - 50 + "px";
 canvas.appendChild(spirit);
 spirit.innerHTML = a++;
 }
 // touch move listener
 function touchMove(event) {
 event.preventDefault();
 if (!spirit || !event.touches.length) return;
 var touch = event.touches[0];
 //spirit.style.left = touch.pageX - 50 + "px";
 //spirit.style.top = touch.pageY - 50 + "px";
 //或者用下面的
 var x = touch.pageX - startX;
 var y = touch.pageY - startY;
 spirit.style.webkitTransform = ‘translate(‘ + x + ‘px, ‘ + y + ‘px)‘;
 }
 // touch end listener
 function touchEnd(event) {
 if (!spirit) return;
 canvas.removeChild(spirit);
 spirit = null;
 }
 // add touch start listener
 canvas.addEventListener("touchstart", touchStart, false);
 canvas.addEventListener("touchmove", touchMove, false);
 canvas.addEventListener("touchend", touchEnd, false);
 </script>