HTML5触摸事件(touchstart、touchmove和touchend) （转）

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对象的数组。

touches: 当前屏幕上所有触摸点的列表;

targetTouches: 当前对象上所有触摸点的列表;

changedTouches: 涉及当前(引发)事件的触摸点的列表

通过一个例子来区分一下触摸事件中的这三个属性：

1. 用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。

2. 用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。当两个手指触摸相同元素时，
targetTouches和touches的值相同，否则targetTouches 只有一个值。changedTouches此时只有一个值，
为第二个手指的触摸点，因为第二个手指是引发事件的原因

3. 用两个手指同时接触屏幕，此时changedTouches有两个值，每一个手指的触摸点都有一个值

4. 手指滑动时，三个值都会发生变化

5. 一个手指离开屏幕，touches和targetTouches中对应的元素会同时移除，而changedTouches仍然会存在元素。

6. 手指都离开屏幕之后，touches和targetTouches中将不会再有值，changedTouches还会有一个值，
此值为最后一个离开屏幕的手指的接触点。

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

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

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

　　identifier：标识触摸的唯一ID。

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

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

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

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

　　target：触目的DOM节点目标。

clientX、offsetX、screenX、pageX、x的区别

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <style>
    .text-box {
        width:100%;
        height:400px;
        background: red;
        
        /* position:absolute;
        left:50px; */
    }
    .inner-bpx {
        height: 100px;
        width:100px;
        background: blue;
        margin: 60px;
    }
    </style>
</head>
<body>
    <div class="text-box">
        <div class="inner-bpx" id="inp">test</div>
    </div>
    <script>
        function load (){ 
            var oInp = document.getElementById("inp"); 
            oInp.addEventListener('touchstart',touch, false); 
            oInp.addEventListener('touchmove',touch, false); 
            oInp.addEventListener('touchend',touch, false); 
                
            function touch (event){ 
                event.stopPropagation();
                var event = event || window.event;  
                switch(event.type){ 
                    case "touchstart": 
                        oInp.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; 
                        break; 
                    case "touchend": 
                        oInp.innerHTML = "<br>Touch end (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")"; 
                        break; 
                    case "touchmove": 
                        // event.preventDefault(); 
                        oInp.innerHTML = "<br>Touch moved (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")"; 
                        break; 
                } 
                    
            } 
        } 
        window.addEventListener('load',load, false);
    </script>
</body>
</html>

对上面的代码稍微做点改动，可以判断水平方向滑动的方向，然后左相应的动作，如下：

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>原生方式实现图片懒加载</title>
    <style>
    body {
        text-align: center;
        padding: 0;
        margin: 0;
    }
    img {
        width: 100%;
        margin-bottom: 30px; 
    }
    .info-text {
        text-align: left;
        padding: 10px;
    }
    </style>
</head>
<body>
    <div id="imgBoxFrame" >
          <div class="img-warpper">
            <img  id='imgPic'>
          </div>
          <div class="info-text">

            品牌: 纱非  <br/>
            适用年龄: 30-34周岁 <br/>
            尺码: M L XL 2XL <br/>
            面料材质: 水貂 <br/>
            毛领型: POLO领 <br/>
            风格: 街头 <br/>
            街头: 欧美衣 <br/>
            门襟: 其他流行 <br/>
            元素: 毛领 <br/>
            颜色分类: 红色 金色十字貂 蓝色十字貂 银色十字貂黑 <br/>
            毛领袖型: 喇叭袖 <br/>
          
          </div>
    </div>
    <script src="./scroll.js"></script>

</body>
</html>

scroll.js

var allImgs = [{
    src:'1.jpg',
    info:'ssss'
},{
    src:'2.jpg',
    info:'ssss'
},{
    src:'3.jpg',
    info:'ssss'
},{
    src:'4.jpg',
    info:'ssss'
},{
    src:'5.jpg',
    info:'ssss'
},{
    src:'6.jpg',
    info:'ssss'
}];
function load(){
  var currentIndex = 0, //当前显示哪张图片
  direction;  //手滑动的时候，判断是往哪个方向
   
    var oInp = document.getElementById("imgPic");
    oInp.src= '../../imgs/'+allImgs[currentIndex].src;
    oInp.addEventListener('touchstart',touch, false);
    oInp.addEventListener('touchmove',touch, false);
    oInp.addEventListener('touchend',touch, false);
     
    function touchSuccessFun(){
        console.log(currentIndex);
        switch(direction){
            case 'ltr':
                //从左往右
                console.log('从左往右');
                if(currentIndex==0) {
                    alert('已经是第一张了');
                    return;
                }
                currentIndex--;
                break;
            case 'rtl':
                //从右往左
                console.log('从右往左');
                if(currentIndex==allImgs.length-1) {
                    alert('已经是最后一张了');
                    return;
                }
                currentIndex++;
                break;
            default:
                console.log('点击事件');
                break;
        }
        oInp.src= '../../imgs/'+allImgs[currentIndex].src;    
    };

    function touch (event){
        var event = event || window.event;
        event.stopPropagation();    
        var distance='',minRange=10;
           
        switch(event.type){
            case "touchstart":
                direction='';
                clientX_start=event.touches[0].clientX;
                break;
            case "touchend":
                touchSuccessFun();
                break;
            case "touchmove":
                clientX_end = event.changedTouches[0].clientX;
                //判断移动的方向
                distance=clientX_end-clientX_start;
                // distance > 0 && distance > minRange   - 从左往右
                // distance < 0 && Math.abs(distance) > minRange
                
                if(distance > 0 && distance>minRange) {
                    direction='ltr';
                }
                else if(distance < 0 && Math.abs(distance) > minRange){
                    direction='rtl';
                }
                break;
        }  
    }
}
 
window.addEventListener('load',load, false);

---恢复内容结束---