HTML5的javascript touch事件_H5之家 - 中国HTML5教程资源分享第一站

以下是几种普及得比较好的触摸事件，可以在绝大多数现代浏览器中来测试这一事件（必须是触屏设备）：

(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

</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>

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>

标签： h5

顶一下

(0)

踩一下

(0)