在Web开发中使用多点触碰技术

更多HTML 5文章请查阅HTML 6在线网站http://www.html5online.com.cn

本文概述

        近些年,智能手机等移动设备都使用一个电容式触碰敏感屏幕来捕捉用户手指在设备屏幕上的交互操作。随着移动平台上的Web开发技术的发展,开发者需要寻求一种方法对用户手指在设备屏幕上所进行的交互操作来进行处理。例如,在一些手机游戏中,需要对用户同时按下多个按钮的操作进行处理。这种操作对于设备屏幕来说,属于一种多点触碰操作。


       目前为止,iOS操作系统与Android操作系统都推出了自己的touch events API。最近,W3C工作小组将这些API进行结合,推出了touch events标准。


       本文针对touch events API进行概要介绍,同时介绍开发者可以通过touch events API开发什么样的应用程序,以及使用touch events API时必须要附加的一些额外的处理。


触碰事件


       在touch events标准中,定义了三种目前为止受到所有移动设备支持的事件：


touchstart:当用户手指在一个页面元素上按下时触发。
touchmove:当用户手指拖动一个页面元素时触发。
touchend:当用户手指从一个页面元素上松开时触发。
每一个事件对象都拥有如下所示的一些属性：


touches:由所有用户手指在屏幕上的触碰点所构成的集合。
targetTouches:由所有用户手指在页面元素上的触碰点所构成的集合。
changedTouches:由本次事件所涉及到的所有触碰点所构成的集合。例如,当被触发的事件为touchend事件时,该集合中包括所有被从屏幕上移除的触碰点所构成的集合。
每一个触碰点都拥有如下所示的一些属性：


identifier:属性值为一个整数值,用于标识屏幕上的每一个触碰点。
target:属性值为该触碰点所在元素。
pageX与pageY:属性值为一个整数,分别表示触碰点在页面上的水平方向与垂直方向上的坐标点位置。
screenX与screenY:属性值为一个整数,分别表示触碰点在屏幕上的水平方向与垂直方向上的坐标点位置。
radiusX与radiusY:属性值为一个整数,分别表示一个接近于用户手指形状的椭圆在水平方向上的半径值与垂直方向上的半径值。
rotationAngle:属性值为一个整数,表示一个接近于用户手指形状的椭圆在顺时针方向上的旋转角度。
在应用程序中使用touch events API


       在应用程序中,可以通过touchstart事件、touchmove事件与touchend事件使应用程序处理用户手指在设备屏幕上执行的交互操作,包括用户通过手指所执行的元素的缩放操作或旋转操作等等。


       通过如下所示的代码片断,用户可以通过手指来拖动页面元素。


var obj = document.getElementById('elementID');
obj.addEventListener('touchmove', function(event) {
    if (event.targetTouches.length == 1) {//如果该元素上拥有一个手指触碰点
        var touch = event.targetTouches[0];
        //将元素移动到手指所在处
        obj.style.left = touch.pageX + 'px';
        obj.style.top = touch.pageY + 'px';
    }
    event.preventDefault();
}, false);
       通过如下所示的代码片断,用户可以通过手指在屏幕中进行图形的绘制操作。
canvas.addEventListener('touchmove', function(event) {
    for (var i = 0; i < event.touches.length; i++) {
        var touch = event.touches[i];
        ctx.beginPath();
        ctx.arc(touch.pageX, touch.pageY, 20, 0, 2*Math.PI, true);
        ctx.fill();
        ctx.stroke();
    }
    event.preventDefault();
}, false);
       需要执行的一些处理
       防止用户缩放
       浏览器的一些默认行为可能不符合我们的需求,例如当用户手指在屏幕上拖动时,浏览器的默认行为为对页面的滚动与缩放操作。

       为了防止用户手指对页面所执行的缩放操作,可以在meta标签中使用viewport属性,代码如下所示。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
       防止页面滚动

       在一些移动设备中,touchmove事件的默认行为为页面的滚动操作。为了防止这种默认的事件响应处理,可以使用如下所示的代码。

document.body.addEventListener('touchmove', function(event) {
    //自定义touchmove事件的事件处理代码,代码略
    event.preventDefault();//防止页面滚动
}, false); 
       使用targetTouches属性与changedTouches属性
       请记住,在touch事件对象的touches属性值中,存放了设备屏幕上的所有触碰点,包括不在任何页面元素上的触碰点。所以在必要的时候,我们可能需要使用targetTouches属性与changedTouches属性。
       设备支持
       不幸的是,在各种不同的移动设备中对于touch events API所提供的支持各不相同。

       目前为止,iOS操作系统与Android操作系统中均支持touchstart事件、touchend事件与touchmove事件。

       在W3C制定的标准中,定义了如下所示的三个touch事件,目前尚没有任何浏览器及设备对其提供支持。

touchenter:当手指移动到某个页面元素上时触发。
touchleave:当手指从某个页面元素上移开时触发。
touchcancel:当一个touch事件被中止时触发(例如用户手指已移动到浏览器窗口之外)。
       目前为止,iOS操作系统与Android操作系统中均支持touches属性、targetTouches属性与changedTouches属性。但是,目前为止尚未有任何浏览器及设备对触碰点的radiusX属性、radiusY属性与rotationAngle属性提供支持。

       在各浏览器中,在用户手指拖动元素的过程中,每秒钟大约触发60次touchmove事件。

       Android 2.3.3版本浏览器

       在Android 2.3.3版本浏览器中,不对touch事件提供支持。

Android 3.0.1版本浏览器

       在Android 3.0.1版本浏览器中,对touch事件提供基本的支持,但是只支持针对单个元素触发的touch事件,不支持两个页面元素上同时触发的touch事件。换句话说,支持如下所示的代码。
obj1.addEventListener('touchmove', function(event) {
    for (var i = 0; i < event.targetTouches; i++) {
        var touch = event.targetTouches[i];
        console.log('touched ' + touch.identifier);
    }
}, false);
不支持如下所示的代码：

var objs = [obj1, obj2];
for (var i = 0; i < objs.length; i++) {
    var obj = objs[i];
    obj.addEventListener('touchmove', function(event) {
        if (event.targetTouches.length == 1) {
            console.log('touched ' + event.targetTouches[0].identifier);
        }
    }, false);
}
iOS4.X版本浏览器(在iPad、iPhone设备中使用）
在使用iOS操作系统的设备中,对touch事件提供完整的支持,能够支持多个手指在多个元素上触发的touch事件。