HTML5中新添加了很多事件，但是由于他们的兼容问题不是很理想，应用实战性不是太强，所以在这里基本省略，咱们只分享应用广泛兼容不错的事件，日后随着兼容情况提升以后再陆续添加分享。今天为大家介绍的事件主要是触摸事件：touchstart、touchmove和touchend。

一开始触摸事件touchstart、touchmove和touchend是iOs版Safari浏览器为了向开发人员传达一些信息新添加的事件。因为iOs设备既没有鼠标也没有键盘，所以在为移动Safari浏览器开发交互性网页的时候，PC端的鼠标和键盘事件是不够用的。

在iPhone 3Gs发布的时候，其自带的移动Safari浏览器就提供了一些与触摸(touch)操作相关的新事件。随后，Android上的浏览器也实现了相同的事件。触摸事件(touch)会在用户手指放在屏幕上面的时候、在屏幕上滑动的时候或者是从屏幕上移开的时候出发。下面具体说明：

touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

touchend事件：当手指从屏幕上离开的时候触发。

touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明，咱们只能去猜测了。

上面的这些事件都会冒泡，也都可以取消。虽然这些触摸事件没有在DOM规范中定义，但是它们却是以兼容DOM的方式实现的。所以，每个触摸事件的event对象都提供了在鼠标实践中常见的属性：bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)、clientX(返回当事件被触发时，鼠标指针的水平坐标)、clientY(返回当事件触发时，鼠标指针的垂直坐标)、screenX(当某个事件被触发时，鼠标指针的水平坐标)和screenY(返回当某个事件被触发时，鼠标指针的垂直坐标)。除了常见的DOM属性，触摸事件还包含下面三个用于跟踪触摸的属性。

touches：表示当前跟踪的触摸操作的touch对象的数组。

targetTouches：特定于事件目标的Touch对象的数组。

changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个Touch对象包含的属性如下。

clientX：触摸目标在视口中的x坐标。

clientY：触摸目标在视口中的y坐标。

identifier：标识触摸的唯一ID。

pageX：触摸目标在页面中的x坐标。

pageY：触摸目标在页面中的y坐标。

screenX：触摸目标在屏幕中的x坐标。

screenY：触摸目标在屏幕中的y坐标。

target：触目的DOM节点目标。

上面的属性光这么看，果然非常繁琐，每个属性说的都是那么的细致，只有真刀实枪的来点小例子才能更加明白其中的奥妙。所以小例子如下。

JavaScript代码

function load (){

document.addEventListener('touchstart',touch, false);

document.addEventListener('touchmove',touch, false);

document.addEventListener('touchend',touch, false);

function touch (event){

var event = event || window.event;

var oInp = document.getElementById("inp");

switch(event.type){

case "touchstart":

oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";

break;

case "touchend":

oInp.innerHTML = "
Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";

break;

case "touchmove":

event.preventDefault();

oInp.innerHTML = "
Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";

break;

}

}

}

window.addEventListener('load',load, false);

//

HTML代码：

上面的小例子。当touchstart事件触发的时候，会将触摸的位置更新到div标签中。当touchmove事件触发的时候，会默认行为的滚动(触摸移动的默认行为是滚动页面)，然后触摸操作的变化信息更新到div标签中。而touchend事件会输出有关触摸操作的最终信息。注意，在touchend事件触发的时候，touches集合中就没有任何Touch对象了，因为不存在活动的触摸操作。

这些事件会在文档的所有元素上面触发，因而可以分别操作页面的不同部分。在触摸屏幕上的元素，这些事件(包括鼠标事件)发生的顺序如下：

(1)touchstart

(2)mouseover

(3)mousemove(一次)

(4)mousedown

(5)mouseup

(6)click

(7)touchend

介绍了这么多，这些触摸事件的兼容情况怎么样呢?支持触摸事件(touchstart、touchmove和touchend)的浏览器有：iOs版Safari、Android版WebKit、bada版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1+和LG专有OS中的Phantom浏览器。目前只有iOs版Safari支持多点触摸。PC版Firefox 6+ 和chrome_6494_1.html' target='_blank'>Chrome也支持触摸事件。

HTML5实战与剖析之触摸事件(touchstart、touchmove和touchend)就为大家介绍到这里了，今天主要为大家介绍了些浏览器兼容支持的情况还不错的触摸事件。日后若有兼容不错的事件，再继续介绍。更多有关HTML5实战与剖析的相关知识，敬请关注梦龙小站的相关更新。

移动端 触摸事件 ontouchstart、ontouchmove、ontouchend、ontouchcancel

1、Touch事件简介

pc上的web页面鼠 标会产生onmousedown、onmouseup、onmouseout、onmouseover、onmousemove的事件，但是在移动终端如 iphone、ipod  Touch、ipad上的web页面触屏时会产生ontouchstart、ontouchmove、ontouchend、ontouchcancel 事件，分别对应了触屏开始、拖拽及完成触屏事件和取消。

当按下手指时，触发ontouchstart；

当移动手指时，触发ontouchmove；

当移走手指时，触发ontouchend。

当一些更高级别的事件发生的时候(如电话接入或者弹出信息)会取消当前的touch操作，即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。

2、Touch事件与Mouse事件的出发关系

在触屏操作后，手指提起的一刹那(即发生ontouchend后)，系统会判断接收到事件的element的内容是否被改变，如果内容被改变，接下来的事 件都不会触发，如果没有改变，会按照mousedown，mouseup，click的顺序触发事件。特别需要提到的是，只有再触发一个触屏事件时，才会 触发上一个事件的mouseout事件。

移动互联网终端的touch事件,touchstart, touchend, touchmove

诸如智能手机和平板电脑一类的移动设备通常会有一个电容式触摸屏(capacitive touch-sensitive screen)，以捕捉用户的手指所做的交互。随着移动网络的发展，其能够支持越来越复杂的应用，web开发者需要一种方法来处理这些事件。例如，几乎所 有的快节奏游戏都需要玩家一次按下多个按钮，这种方式，在触摸屏情况下，意味着多点触摸。Apple在iOS 2.0中引入了触摸事件API，Android正迎头赶上这一事实标准，缩小差距。最近一个W3C工作组正合力制定这一触摸事件规范。

iOS上的Safari也支持click 和mouseover等传统的交互事件，只是不推荐在iOS的浏览器应用上使用click和mouseover，因为这两个事件是为了支持鼠标点击而设计 出来的。Click事件在iOS上会有半秒左右的延迟，原因是iOS要highlight接收到click的element。而 mouseover/out等事件则会被手指的点击触发。所以，在iOS上，应当抛弃传统的交互事件模型而接受一个新的事件模型。Touch事件和更高级 的Gesture事件，能让你的网页交互起来像native应用一样。

三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件：

1. touchstart ：手指放在一个DOM元素上。

2. touchmove ：手指拖曳一个DOM元素。

3. touchend ：手指从一个DOM元素上移开。

每个触摸事件都包括了三个触摸列表：

1. touches ：当前位于屏幕上的所有手指的一个列表。

2. targetTouches ：位于当前DOM元素上的手指的一个列表。

3. changedTouches ：涉及当前事件的手指的一个列表。

例如，在一个touchend事件中，这就会是移开的手指。

这些列表由包含了触摸信息的对象组成：

1. identifier ：一个数值，唯一标识触摸会话(touch session)中的当前手指。

2. target ：DOM元素，是动作所针对的目标。

3. 客户/页面/屏幕坐标 ：动作在屏幕上发生的位置。

4. 半径坐标和 rotationAngle ：画出大约相当于手指形状的椭圆形。

在开始描述touch事件之前，需要先描述一下多触式系统中特有的touch对象(android和iOS乃至nokia最新的meego系统都模拟了类 似的对象，这里只针对iOS，因为我只有iPad可用于测试。。)。这个对象封装一次屏幕触摸，一般来自于手指。它在touch事件触发的时候产生，可以 通过touch event handler的event对象取到(一般是通过event.changedTouches属性)。这个对象包括一些重要的属性：

client / clientY：触摸点相对于浏览器窗口viewport的位置

pageX / pageY：触摸点相对于页面的位置

screenX /screenY：触摸点相对于屏幕的位置

identifier： touch对象的unique ID

我们从一个单根手指触摸的实例开始进入多触式网页的世界。当一根手指放下的时候，屏幕上出现一个方块，手指移动方块也随着移动，手指提起方块消失。首先，让我们定义一下方块的css：

*{margin:0;padding:0}

html,body{height:100%}

.spirit{position:absolute;width:50px;height:50px;background-color:red;}

#canvas{position:relative;width:100%;height:200px;background-color:#ccc}

然后，在body下定义一个接收事件的容器：

定义touchstart的事件处理函数，并绑定事件：

var canvas = document.getElementById("canvas"),

spirit,

startX,

startY;

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");

canvas.appendChild(spirit);

spirit.className = "spirit";

spirit.style.left = startX + "px";

spirit.style.top = startY + "px";

}

canvas.addEventListener("touchstart", touchStart, false);

首先，我们将方块spirit作为一个全局对象，因为我们现在要测试单根手指所以屏幕上最好只有一个物体在移动(等会有多触实例)。在touchStart这个事件处理函数中，我们也首先判断了是否已经产生了spirit，也就是是否已经有一个手指放到屏幕上，如果是，直接返回。

和传统的event listener一样，多触式系统也会产生一个event对象，只不过这个对象要多出一些属性，比如这里的event.touches，这个数组对象获得屏幕上所有的touch。注意这里的event.preventDefault()，在传统的事件处理函数中，这个方法阻止事件的默认动作，触摸事件的默认动作是滚屏，我们不想屏幕动来动去的，所以先调用一下这个函数。我们取第一个touch，将其pageX/Y作为spirit创建时的初始位置。接下来，我们创建一个div，并且设置className，left，top三个属性。最后，我们把spirit对象appendChild到容器中。这样，当第一根手指放下的时候，一个红色的，50px见方的方块就放到屏幕上了。

然后，我们要开始处理手指在屏幕上移动的事件：

function touchMove(event) {

event.preventDefault();

if (!spirit || !event.touches.length) return;

var touch = event.touches[0],

x = touch.pageX - startX,

y = touch.pageY - startY;

//这里是为了手指一定是横向滚动的,原理是计算X位置的偏移要比Y的偏移大

if (Math.abs(x) > Math.abs(y)) {

spirit.style.left = touch.pageX + "px";

spirit.style.top = touch.pageY + "px";

}

}

canvas.addEventListener("touchmove", touchMove, false);

在touch move listener中，我们使用webkit特有的css属性：webkitTransform来移动方块，这个属性具体怎么用请google之。建议构造面向iOS设备的网页的时候尽量使用webkit自己的特性，不但炫，更可以直接利用硬件来提高性能。

最后，我们处理touchend事件。手指提起的时候方块从屏幕上移除。

function touchEnd(event) {

if (!spirit) return;

canvas.removeChild(spirit);

spirit = null;

}

canvas.addEventListener("touchend", touchEnd, false);

在你的ipad或者iphone上测试一下以上代码。如果不出意外的话，一个完整的多触式web程序就诞生了。。

设备支持

遗憾的是，触摸事件的实现在完备性和质量方面的差别很大。我编写了一个诊断脚本来显示一些关于触摸API实现的基本信息，其中包括哪些事件是支持 的，以及 touchmove事件触发的解决方案。我在Nexus One和Nexus S硬件上测试了Android 2.3.3，在Xoom上测试了Android 3.0.1，以及在iPad和iPhone上测试了iOS 4.2。

简而言之，所有被测试的浏览器都支持touchstart、touchend和touchmove事件。

规范提供了额外的三个触摸事件，但被测试的浏览器没有支持它们：

1. touchenter ：移动的手指进入一个DOM元素。

2. toucheleave ：移动手指离开一个DOM元素。

3. touchcancel ：触摸被中断(实现规范)。

被测试的浏览器还在每个触摸列表内部都提供了touches、targetTouches和changedTouches列表。不过，被测试的浏 览器没有支持 radiusX、radiusY或是rotationAngle属性，这些属性指明触摸屏幕的手指的形状。在一次touchmove期间，事件大约一秒钟 触发60次，所有的被测试设备都是这样。

开发者工具

在移动开发中，一种较为容易的做法是，先在桌面上开始原型设计，然后再在打算要支持的设备上处理移动特有的部分。多点触摸正是难以在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回调模拟规范兼容的触摸事件。

HTML5移动应用左右滑动touchmove touchmove touchend 实例

HTML5测试

$(function() {

var startX, startY, endX, endY;

var showADID = 1;

document.getElementById("divADBox").addEventListener("touchstart", touchStart, false);

document.getElementById("divADBox").addEventListener("touchmove", touchMove, false);

document.getElementById("divADBox").addEventListener("touchend", touchEnd, false);

function touchStart(event) {

var touch = event.touches[0];

startY = touch.pageY;

startX = touch.pageX;

}

function touchMove(event) {

var touch = event.touches[0];

//endY = (startY - touch.pageY);

endX = touch.pageX;

}

function touchEnd(event) {

$("#img0" + showADID).hide();

showADID++;

if (showADID > 4) {

showADID = 1;

}

if ((startX - endX) > 100) {

$("#img0" + showADID).show();

}

$("#spText").html("X轴移动大小：" + (startX - endX));

}

})

JS移动端获取触控位置，滑动翻页：

//禁用手机默认的触屏滚动行为

document.addEventListener('touchmove', function(event) {

event.preventDefault();

}, false);

//touchstart事件

function touchSatrtFunc(evt) {

try {

//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

var touch = evt.touches[0]; //获取第一个触点

var x = Number(touch.pageX); //页面触点X坐标

var y = Number(touch.pageY); //页面触点Y坐标

//记录触点初始位置

startX = x;

startY = y;

} catch (e) {

alert('touchSatrtFunc：' + e.message);

}

}

//touchmove事件，这个事件无法获取坐标

function touchMoveFunc(evt) {

try {

//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

var touch = evt.touches[0]; //获取第一个触点

var x = Number(touch.pageX); //页面触点X坐标

var y = Number(touch.pageY); //页面触点Y坐标

//document.getElementById("version").innerHTML = "原:"+startY+"   "+"现:"+y;

//判断滑动方向 上下

if (y - startY > 100) {

swipeDown();//你自己的方法 我是用来翻页的一样的

} else if(y - startY < -100){

swipeUp();//你自己的方法

}

} catch (e) {

alert('touchMoveFunc：' + e.message);

}

}

//touchend事件

function touchEndFunc(evt) {

try {

//evt.preventDefault(); //阻止触摸时浏览器的缩放、滚动条滚动等

} catch (e) {

alert('touchEndFunc：' + e.message);

}

}

//绑定事件

function bindEvent() {

document.addEventListener('touchstart', touchSatrtFunc, false);

document.addEventListener('touchmove', touchMoveFunc, false);

document.addEventListener('touchend', touchEndFunc, false);

}

//判断是否支持触摸事件

function isTouchDevice() {

//document.getElementById("version").innerHTML = navigator.appVersion;

try {

document.createEvent("TouchEvent");

//alert("支持TouchEvent事件！");

bindEvent(); //绑定事件

} catch (e) {

alert("不支持TouchEvent事件！" + e.message);

}

}

/

禁用手机默认的触屏滚动行为：

$(document).ready(function () {

//touch_move

$('body').on('touchmove', function (e) {

var event = e ? e : window.event;

if (event.preventDefault) {

event.preventDefault();

} else {

event.returnValue = false;

}

if (event.stopPropagation) {

event.stopPropagation();

} else {

event.cancelBubble = true;

}

});

});

标签： h5

顶一下

(0)

0%

踩一下

(0)

0%