zoukankan      html  css  js  c++  java
  • 触摸事件+手势事件

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

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

      

       

  • 相关阅读:
    September 17th 2016 Week 38th Saturday
    【2016-09-16】UbuntuServer14.04或更高版本安装问题记录
    September 16th 2016 Week 38th Friday
    September 11th 2016 Week 38th Sunday
    September 12th 2016 Week 38th Monday
    September 10th 2016 Week 37th Saturday
    September 9th 2016 Week 37th Friday
    c++暂停
    八皇后问题
    ( 转转)Android初级开发第九讲--Intent最全用法(打开文件跳转页面等)
  • 原文地址:https://www.cnblogs.com/wymbk/p/5646837.html
Copyright © 2011-2022 走看看