WINDOWS系統下觸屏設備網頁實現滾動的touch事件處理

公司有觸控屏設備採用WIN7系統，普通網頁打開後觸屏操控如滑動網頁沒有效果，需在網頁代碼中添加JS處理touch事件網頁的手勢滑動效果。固然首先須要webkit內核支持touch事件。

如下內容引用http://www.cnblogs.com/zourong/p/3913446.html
touchstart: //手指放到屏幕上時觸發
touchmove: //手指在屏幕上滑動式觸發
touchend: //手指離開屏幕時觸發
touchcancel: //系統取消touch事件的時候觸發，這個好像比較少用

每一個觸摸事件被觸發後，會生成一個event對象，event對象裏額外包括如下三個觸摸列表
touches: //當前屏幕上全部手指的列表
targetTouches: //當前dom元素上手指的列表，儘可能使用這個代替touches
changedTouches: //涉及當前事件的手指的列表，儘可能使用這個代替touches
這些列表裏的每次觸摸由touch對象組成，touch對象裏包含着觸摸信息，主要屬性以下：
clientX / clientY: //觸摸點相對瀏覽器窗口的位置
pageX / pageY: //觸摸點相對於頁面的位置
screenX / screenY: //觸摸點相對於屏幕的位置
identifier: //touch對象的ID
target: //當前的DOM元素

注意：
手指在滑動整個屏幕時，會影響瀏覽器的行爲，好比滾動和縮放。因此在調用touch事件時，要注意禁止縮放和滾動。
1.禁止縮放
經過meta元標籤來設置。
<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">
2.禁止滾動
preventDefault是阻止默認行爲，touch事件的默認行爲就是滾動。
event.preventDefault();

如下引用自http://blog.csdn.net/jiangcs520/article/details/17564065

不少博文中稱touch的三個事件都有targetTouches，touches以及changedTouches對象列表，其實否則，touchend事件中應該是隻有個changedTouches觸摸實例列表的，並且這裏說明一下，回調函數的event只是一個普通的object對象，實際上event中有一個originalEvent屬性，這纔是真正的touch事件，這個事件中才存在着上訴三個觸摸實例列表，這三個實例存儲了觸摸事件的位置等等屬性，相似於鼠標事件。其餘地方基本與鼠標事件是一致的。簡單介紹一下這三個觸摸列表，touches是在屏幕上的全部手指列表，targetTouches是當前DOM上的手指列表，因此當手指移開觸發touchend事件時，event.originalEvent是沒有這個targetTouches列表的，而changedTouches列表是涉及當前事件的列表，例如touchend事件中，手指移開。

根據以上2篇文章處理網頁，對body進行pageY軸計算滑動距離，進行頁面滾動；
在touchend事件中使用originalEvent.changedTouches[0].target屬性判斷連接目標進行點擊。

<script type="text/javascript">
$(document).ready(function(){
    var startY = 0;
    var tObj = {pageY:0,isdown:false};
    
    $(".body").unbind('touchstart').bind('touchstart',function(e){
        e.preventDefault();
        tObj.pageY = e.originalEvent.targetTouches[0].pageY ;                   
        tObj.isdown = true;
        });          
                
    $("body").unbind('touchmove').bind('touchmove',function(e){
          e.preventDefault();
            if(tObj.isdown==true)
            {                    
                var dy =tObj.pageY -e.originalEvent.targetTouches[0].pageY;
                startY = startY+dy;
                if(Math.abs(dy)>=10)
                   {                           
                   window.scrollTo(0,startY);
                   }                       
            }
    });
                
    $(".body").unbind('touchend').bind('touchend',function(e){
        e.preventDefault(); 
        tObj.pageY = 0 ;                          
        tObj.isdown = false;
        e.originalEvent.changedTouches[0].target.click();       
    });    
});
</script>