JavaScript触摸与手势事件

JavaScript触摸与手势事件

发表于 2012-12-10 由 admin

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集合。

这些事件会在文档的全部元素上面触发，于是能够分别操做页面的不一样部分。在触摸屏幕上的元素时，这些事件发生的数序以下：

1. touchstart
2. mouseover
3. mousemove
4. mousedown
5. mouseup
6. click
7. 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);

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