html5 的touchstart、touchmove和touchend 事件

http://bbs.html5cn.org/thread-84163-1-1.html

http://www.jb51.net/html5/70096.html

 

touchstart事件：當手指觸摸屏幕時候觸發，即便已經有一個手指放在屏幕上也會觸發。

touchmove事件：當手指在屏幕上滑動的時候連續地觸發。在這個事件發生期間，調用preventDefault()事件能夠阻止滾動。

touchend事件：當手指從屏幕上離開的時候觸發。

 

touches：表示當前跟蹤的觸摸操做的touch對象的數組。

targetTouches：特定於事件目標的Touch對象的數組。

changeTouches：表示自上次觸摸以來發生了什麼改變的Touch對象的數組。

 

　每一個Touch對象包含的屬性以下。

 

　　clientX：觸摸目標在視口中的x座標。

　　clientY：觸摸目標在視口中的y座標。

　　identifier：標識觸摸的惟一ID。

　　pageX：觸摸目標在頁面中的x座標。

　　pageY：觸摸目標在頁面中的y座標。

　　screenX：觸摸目標在屏幕中的x座標。

　　screenY：觸摸目標在屏幕中的y座標。

　　target：觸目的DOM節點目標。

 

 

var pressX = 0, pressY = 0;
    var nowScrollLeft=0;
    var obj = document.getElementById('profitCharts');
    obj.addEventListener('touchstart', function(event) {
        // 若是這個元素的位置內只有一個手指的話
        if (event.targetTouches.length == 1) {
            var touch = event.targetTouches[0];
            pressX = touch.pageX;
            pressY = touch.pageY;
            nowScrollLeft =$("#profitCharts").scrollLeft();
        }
    });
    obj.addEventListener('touchmove', function(event) {
       if (event.targetTouches.length == 1) {
            var touch = event.targetTouches[0];
            var spanX = touch.pageX - pressX;
            var spanY = touch.pageY - pressY;
            var direct = "none";
            if (Math.abs(spanX) > Math.abs(spanY)) {
                //水平方向
                if (spanX > 0) {
                    direct = "right";//向右
                    nowScrollLeft -= 10;
                    $("#profitCharts").scrollLeft(nowScrollLeft);
                    
                } else {
                    nowScrollLeft += 10;
                    direct = "left";//向左
                    $("#profitCharts").scrollLeft(nowScrollLeft);
                }
            }
       };
       event.preventDefault();
       event.stopPropagation();
    });