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

• touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发
• touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动
• touchend事件：当手指从屏幕上离开的时候触发
• touchcancel事件：当系统停止跟踪触摸的时候触发

虽然这些触摸事件没有在DOM规范中定义，但是它们却是以兼容DOM的方式实现的。所以，每个触摸事件的event对象都提供了在鼠标实践中常见的属性：bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)、clientX(返回当事件被触发时，鼠标指针的水平坐标)、clientY(返回当事件触发时，鼠标指针的垂直坐标)、screenX(当某个事件被触发时，鼠标指针的水平坐标)和screenY(返回当某个事件被触发时，鼠标指针的垂直坐标)。

除了常见的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 load () {
    document.addEventListener('touchstart', touch, false);
    document.addEventListener('touchmove', touch, false);
    document.addEventListener('touchend', touch, false);

    function touch (event) {
        var event = event || window.event;
        var oInp = document.getElementById("inp");

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

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

function load() {
    document.addEventListener('touchstart', touch, false);
    document.addEventListener('touchmove', touch, false);
    document.addEventListener('touchend', touch, false);

    function touch (event) {
        var event = event || window.event;

        var oInp = document.getElementById("inp");
        var distance, clientX_start, clientX_end,
            minRange = 10;
            this.clientX_start;
            this.direction;

        this.callbackFun = function() {
            if (this.direction == 'ltr') {
                console.log('从左往右');
            } else {
                console.log('从右往左');
            }
        }
        switch(event.type) {
            case "touchstart":
                clientX_start = event.touches[0].clientX;
                this.clientX_start = clientX_start;
                break;
            case "touchend":
                this.callbackFun();
                break;
            case "touchmove":
                event.preventDefault();
                clientX_end = event.changedTouches[0].clientX;
                //判断移动的方向
                distance = clientX_end - this.clientX_start;
                if (this.clientX_start + minRange < clientX_end) {
                    this.direction = 'ltr';
                } else if (this.clientX_start - minRange > clientX_end) {
                    this.direction = 'rtl';
                }
                break;
        }
    }
}

window.addEventListener('load', load, false);