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