[js点击]JavaScript之原生触摸事件详解01

触摸事件

1.触摸事件概念

该类事件会在用户手指放在屏幕上面时，在屏幕上滑动时，或从屏幕上移开时触发。

2.触摸事件种类

具体来说有以下几个触摸事件。

1.touchstart
当手指放在屏幕上触发。
2.touchmove
当手指在屏幕上滑动时，连续地触发。
3.touchend
当手指从屏幕上离开时触发。
4.touchcancel
当系统停止跟踪时触发，系统什么时候取消，文档没有明确的说明。

【总】以上四个，是w3c提供的触摸事件，只针对触摸设备，最常用的是前三个。

3.触摸事件注意点

由于触摸会导致屏幕动来动去，所以可以会在这些事件的事件处理函数内使用event.preventDefault()，来阻止屏幕的默认滚动。

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

    1. touchenter：移动的手指进入一个DOM元素。
    2. toucheleave：移动手指离开一个DOM元素。
    3. touchcancel：触摸被中断（实现规范）。

触摸事件相关的属性

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

1. touchstart：手指放在一个DOM元素上。 
2. touchmove：手指拖曳一个DOM元素。
3. touchend：手指从一个DOM元素上移开。

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

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

当一个手指在触屏上时，event.touches.length=1,
当两个手指在触屏上时，event.touches.length=2，以此类推。

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

targetTouches：特定于事件目标的touch对象数组。
因为touch事件是会冒泡的，所以利用这个属性指出目标对象。

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

changedTouches：表示自上次触摸以来发生了什么改变的touch对象的数组。
例如，在一个touchend事件中，这就会是移开的手指。

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

         1. identifier：一个数值，唯一标识触摸会话（touch session）中的当前手指。
         2. target：DOM元素，是动作所针对的目标。
         3. 客户/页面/屏幕坐标：动作在屏幕上发生的位置。
         4. 半径坐标和 rotationAngle：画出大约相当于手指形状的椭圆形。

5) 每个touch对象都包含下列几个属性：

        clientX：触摸目标在视口中的x坐标。
        clientY：触摸目标在视口中的y坐标。
        identifier：标识触摸的唯一ID。
        pageX：触摸目标在页面中的x坐标。
        pageY：触摸目标在页面中的y坐标。
        screenX：触摸目标在屏幕中的x坐标。
        screenY：触摸目标在屏幕中的y坐标。
        target：触摸的DOM节点目标。

触摸事件的使用

document.addEventListener('touchstart',function(e){
                var ev = e||event;
                console.log(ev.touches[0].clientX);
            });
document.addEventListener('touchmove',function(e){
                var ev = e||event;
                console.log(ev.touches[0].clientX);
            });         

触摸事件的注意点

使用clientX……时，必须要指明具体的touch对象，而不要直接指明数组。

    event.touches[0]
    在touchend事件处理函数中，当该事件发生时，touches里面已经没有任何的
    touch对象了，此时，就要使用changeTouches集合 

触摸事件的运用

    <div>
        触屏事件中，事件对象（e）包含了，类型均为TouchList[数组]  
        touches,手指按下屏幕的点的信息
        targetTouches,目标元素的所有当前触摸
        changedTouches，


    </div>
    <div id="block"></div> 
    <script type="text/javascript"> var block = document.getElementById("block"); block.addEventListener("touchstart",function(e){ console.log(e); // var e = e || window.event; var touches = e.touches[0]; var oLeft = touches.clientX - block.offsetLeft; var oTop = touches.clientY - block.offsetTop; block.addEventListener("touchmove",function(e) { var touches = e.touches[0]; var bLeft = touches.clientX - oLeft; var bTop = touches.clientY - oTop; block.style.left = bLeft + "px"; block.style.top = bTop + "px"; },false) },false) // 为了避免移动端事件的默认行为对交互效果产生影响，建议阻止事件的默认行为， // 但这时不拖动div的时候默认事件也被取消了，解决方案，请看下一节 document.addEventListener("touchmove",function(e){ e.preventDefault(); },false) </script>

下面请看touch.js事件介绍[js点击]JavaScript之触摸事件详解01