移動端JS觸摸事件

觸摸屏上（手機web，平板web）的javascript事件——開發者工具

開發者工具

在移動開發中，一種較爲容易的做法是，先在桌面上開始原型設計，然後再在打算要支持的設備上處理移動特有的部分。多點觸摸正是難以在PC上進行測試的那些功能之一，因爲大部分的PC都沒有觸摸輸入。

不得不在移動設備上進行的測試有可能會拉長你的開發週期，因爲你所做的每項改變都需要提交代碼到服務器上，接着再加載到設備上。然後，一旦運行後，對應用也就沒有太多的調試了，因爲平板電腦和智能手機都很缺乏web開發者所用的工具。

這個問題的一個解決方案是在開發機器上模擬觸發事件。對於單點觸摸，觸摸事件可以基於鼠標事件來模擬。如果你有觸摸輸入設備的話，比如說現代的App MacBook，那麼多點觸摸也可以被模擬。

單點觸摸事件

如果你想在桌面上模擬單點觸摸事件的話，試一下Phantom Limb，該程序在網頁上模擬觸摸事件並提供一隻巨手來引導。

另外還有Touchable這一jQuery插件，該插件跨平臺地統一了觸摸和鼠標事件。

多點觸摸事件

爲了能夠讓你的多點觸摸web應用在你的瀏覽器或是多點觸摸控板（比如說Apple MacBook或是MagicPad）上起作用，我創建了這一個MagicTouch.js填充工具，其捕捉來自觸控板的觸摸事件，然後把它們轉換成標準兼容的觸摸事件。

1. 下載npTuioClient NPAPI插件並把它安裝到~/Library/Internet Plug-Ins/目錄下。

2. 下載這一Mac MagicPad的TongSeng TUIO應用並啓動這一服務器。

3. 下載MagicTouch.js這一JavaScript庫來基於npTuioClient回調模擬規範兼容的觸摸事件。

4. 以如下方式把magictouch.js腳本和npTuioClient插件包含到你的應用中：

< head>
  ...
  < script src="/path/to/magictouch.js" kesrc="/path/to/magictouch.js">< /script>
< /head>

< body>
  ...
  < object id="tuio" type="application/x-tuio" style="width: 0px; height: 0px;">
    Touch input plugin failed to load!
  < /object>
< /body>

我只在Chrome 10上測試了這一方法，不過只要稍做調整它應該能夠在其他的現代瀏覽器上工作。

如果你的計算機沒有多點觸摸輸入的話，你可以使用其他的TUIO跟蹤器，比如說reacTIVision來模擬觸摸事件。欲瞭解更多信息，請參閱TUIO項目頁面。

需要注意的一點是，你的手勢可以是和OS層面的多點觸摸手勢相同的。在OS X上，你可以通過進入System Preferences中的Trackpad偏好設定版面來配置系統範圍的事件。

隨着多點觸摸功能逐漸得到跨移動瀏覽器的的廣泛支持，我非常高興地看到新的web應用充分利用了這一豐富的API。

• 原文來源：html5rocks.com

• 原文標題：Developing for Multi-Touch Web Browsers

• 原文地址：http://www.html5rocks.com/en/mobile/touch.html

一、手機上的觸摸事件

 

基本事件：

 

touchstart   //手指剛接觸屏幕時觸發

touchmove    //手指在屏幕上移動時觸發

touchend     //手指從屏幕上移開時觸發

 

下面這個比較少用：

touchcancel  //觸摸過程被系統取消時觸發

每個事件都有以下列表，比如touchend的targetTouches當然是 0 咯：

 

touches         //位於屏幕上的所有手指的列表

targetTouches   //位於該元素上的所有手指的列表

changedTouches  //涉及當前事件的所有手指的列表

每個事件有列表，每個列表還有以下屬性：

 

複製代碼

其中座標常用pageX,pageY：

pageX    //相對於頁面的 X 座標

pageY    //相對於頁面的 Y 座標

clientX  //相對於視區的 X 座標

clientY  //相對於視區的 Y 座標

screenX  //相對於屏幕的 X 座標

screenY  //相對於屏幕的 Y 座標

 

identifier // 當前觸摸點的惟一編號

target   //手指所觸摸的 DOM 元素

複製代碼

其他相關事件：

 

event.preventDefault（）   //阻止觸摸時瀏覽器的縮放、滾動條滾動

var supportTouch = "createTouch" in document  //判斷是否支持觸摸事件

更多深入內容？點擊：http://www.cesclub.com/bw/jishuzhongxin/Webjishu/2011/1216/18069.html

 

 

 

二、示例

 

以下是獲取不同類型滑動的代碼具體做法，結合前人的思想，封裝好了，可以借鑑學習：

 

複製代碼

var touchFunc = function(obj,type,func) {

    //滑動範圍在5x5內則做點擊處理，s是開始，e是結束

    var init = {x:5,y:5,sx:0,sy:0,ex:0,ey:0};

    var sTime = 0, eTime = 0;

    type = type.toLowerCase();

 

    obj.addEventListener("touchstart",function(){

        sTime = new Date().getTime();

        init.sx = event.targetTouches[0].pageX;

        init.sy = event.targetTouches[0].pageY;

        init.ex = init.sx;

        init.ey = init.sy;

        if(type.indexOf("start") != -1) func();

    }, false);

 

    obj.addEventListener("touchmove",function() {

        event.preventDefault();//阻止觸摸時瀏覽器的縮放、滾動條滾動

        init.ex = event.targetTouches[0].pageX;

        init.ey = event.targetTouches[0].pageY;

        if(type.indexOf("move")!=-1) func();

    }, false);

 

    obj.addEventListener("touchend",function() {

        var changeX = init.sx - init.ex;

        var changeY = init.sy - init.ey;

        if(Math.abs(changeX)>Math.abs(changeY)&&Math.abs(changeY)>init.y) {

            //左右事件

            if(changeX > 0) {

                if(type.indexOf("left")!=-1) func();

            }else{

                if(type.indexOf("right")!=-1) func();

            }

        }

        else if(Math.abs(changeY)>Math.abs(changeX)&&Math.abs(changeX)>init.x){

            //上下事件

            if(changeY > 0) {

                if(type.indexOf("top")!=-1) func();

            }else{

                if(type.indexOf("down")!=-1) func();

            }

        }

        else if(Math.abs(changeX)<init.x && Math.abs(changeY)<init.y){

            eTime = new Date().getTime();

            //點擊事件，此處根據時間差細分下

            if((eTime - sTime) > 300) {

                if(type.indexOf("long")!=-1) func(); //長按

            }

            else {

                if(type.indexOf("click")!=-1) func(); //當點擊處理

            }

        }

        if(type.indexOf("end")!=-1) func();

    }, false);

};

手機觸摸屏的JS事件

  (2013-04-02 17:37:03)

轉載▼

標籤：   js     it

分類： JS

處理Touch事件能讓你跟蹤用戶的每一根手指的位置。你可以綁定以下四種Touch事件：

    1.touchstart:  // 手指放到屏幕上的時候觸發 

    2.touchmove:  // 手指在屏幕上移動的時候觸發 

    3.touchend:  // 手指從屏幕上拿起的時候觸發 

    4touchcancel:  // 系統取消touch事件的時候觸發。至於系統什麼時候會取消，不詳

屬性

    1.client / clientY：// 觸摸點相對於瀏覽器窗口viewport的位置 

    2.pageX / pageY：// 觸摸點相對於頁面的位置 

    3.screenX /screenY：// 觸摸點相對於屏幕的位置 

    4.identifier： // touch對象的unique ID 

//touchstart事件  

function touchSatrtFunc(e) {  

    //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等  

    var touch = e.touches[0]; //獲取第一個觸點  

    var x = Number(touch.pageX); //頁面觸點X座標  

    var y = Number(touch.pageY); //頁面觸點Y座標  

    //記錄觸點初始位置  

    startX = x;  

    startY = y;  

}  

//touchmove事件 

function touchMoveFunc(e) {  

    //evt.preventDefault(); //阻止觸摸時瀏覽器的縮放、滾動條滾動等  

    var touch = evt.touches[0]; //獲取第一個觸點  

    var x = Number(touch.pageX); //頁面觸點X座標  

    var y = Number(touch.pageY); //頁面觸點Y座標  

    var text = 'TouchMove事件觸發：（' + x + ', ' + y + '）';  

    //判斷滑動方向  

    if (x - startX != 0) {  

        //左右滑動  

    }  

    if (y - startY != 0) {  

        //上下滑動  

    }  

}  

Mobile Web前端開發系列: 事件處理（二）

  (2012-08-07 15:16:42)

轉載▼

標籤：   雜談

分類： webapp

上篇文章我們講了html的基本事件，這篇文章我們着重講解下觸摸事件，觸摸事件觸發的條件是手指接觸屏幕、手指在屏幕上移動或者從屏幕上離開。 事件是觸摸的集合，它起始於手指初次放置在屏幕上，終止於最後一個手指離開屏幕。事件從開始到結束過程中的所有觸摸操作都存儲在相同事件的記錄中。

touch事件

touch事件可以分爲單點觸摸和多點觸摸兩種，單點觸摸高端機一般都支持，Safari2.0、Android3.0以上的版本支持多點觸摸，支持最多5個手指同時觸摸屏幕，ipad最多支持11個手指同時觸摸屏幕， 我們可以採用以下的事件模型捕獲這些事件，

ontouchstart ontouchmove ontouchend ontouchcancel

當用戶按下手指在屏幕上，ontouchstart會被觸發，當用戶移動一個或多個手指的時候，ontouchmove會被觸發，當用戶移走手指， ontouchend被觸發。那什麼時候觸發ontouchcancel呢？當一些更高級別的事件發生的時候，例如，alert，有電話打來或者有 推送的消息提示的時候會取消當前的touch操作，即觸發ontouchcancel。當你在開發一個web game的時候，ontouchcancel 對你很重要，你可以在ontouchcancel觸發的時候暫停遊戲或者保存遊戲。

gesture事件

gesture事件的運行原理與touch事件相同，只是gesture事件僅當屏幕上存在至少兩個手指時觸發，所以Safari2.0、Android3.0以上版本支持， 手勢具備諸多優勢，可以幫助我們測量兩指放縮和旋轉操作，事件模型如下，

ongesturestart ongesturechange ongestureend

事件屬性

無論使用觸摸還是手勢事件，你都需要將這些事件轉換爲單獨的觸摸來使用它們。爲此，你需要訪問事件對象的一系列的屬性。

targetTouches 目標元素的所有當前觸摸 changedTouches 頁面上最新更改的所有觸摸 touches 頁面上的所有觸摸

changedTouches、targetTouches和touches分別包含稍微不同的觸摸列表。targetTouches和touches分別包含當前位於 屏幕上的手指列表，但changedTouches僅列出最後發生的觸摸。如果你在使用touchend或者gestureend事件，那麼這個屬性 非常重要。在這兩種情況下，屏幕上都不會再出現手指，因此targetTouches和touches應該爲空，但你仍然可以通過查看 changedTouches數組來了解最後發生的事情。

由於觸摸屬性都會生成數組，因此你可以使用JavaScript數組函數來訪問它們。這意味着，event.touches[0]將返回第一次 觸摸，並且可以使用event.touches.length來計算當前存儲的觸摸數量。

查看單獨觸摸時，通過使用event.targetTouches[0],你也可以訪問其它觸摸，每個觸摸會包含一些具體信息，

clientX、clientY 相對於當前屏幕的X或Y位置 pageX、pageY 相對於整體頁面的X或Y位置 screenX、screenY 相對於用戶計算機屏幕的X或Y位置 identifier 事件的唯一標識符 target 生成觸摸的目標對象

手勢事件的事件對象會比普通觸摸事件多兩個屬性，

rotation 手指的旋轉角度 scale 放縮的值

JavaScript觸摸與手勢事件

發表於 2012-12-10 由 admin

iOS版Safari爲了向開發人員傳達一些特殊信息，新增了一些專有事件。因爲iOS設備既沒有鼠標也沒有鍵盤，所以在爲移動Safari開發交互網頁時，常規的鼠標和鍵盤事件根本不夠用。隨着Android中的WebKit的加入，很多這樣的專有事件變成了事實標準。

1.觸摸事件

包含iOS2.0軟件的iPhone 3G發佈時，也包含了一個新版本的Safari瀏覽器。這款新的移動Safari提供了一些與觸摸(touch)操作相關的新事件。後來,Android上的瀏覽器也實現了相同的事件。觸摸事件會在用戶手指放在屏幕上面時、在屏幕上滑動時或從屏幕上移開時觸發。具體來說，有以下幾個觸摸事件。

• touchstart:當手指觸摸屏幕時觸發；即使已經有一個手指放在了屏幕上也會觸發。
• touchmove:當手指在屏幕上滑動時連續的觸發。在這個事件發生期間，調用preventDefault()可阻止滾動。
• touchend:當手指從屏幕上移開時觸發。
• touchcancel:當系統停止跟蹤觸摸時觸發。關於此事件的確切觸發事件，文檔中沒有明確說明。

上面這幾個事件都會冒泡，也都可以取消。雖然這些觸摸事件沒有在DOM規範中定義，但它們卻是以兼容DOM的方式實現的。因此，每個觸摸事件沒有在DOM規範中定義，但它們卻是以兼容DOM的方式實現的。因此，每個觸摸事件的event對象都提供了在鼠標事件中常見的屬性:bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。

除了常見的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 handleTouchEvent(event) {
    //只跟蹤一次觸摸
    if (event.touches.length == 1) {
        var output = document.getElementById("output");
        switch (event.type) {
            case "touchstart":
                output.innerHTML = "Touch started (" + event.touches[0].clientX + "," + event.touches[0].clientY + ")";
                break;
            case "touchend":
                output.innerHTML += "<br>Touch ended (" + event.changedTouches[0].clientX + "," + event.changeTouches[0].clientY + ")";
                break;
            case "touchmove":
                event.preventDefault(); //阻止滾動
                output.innerHTML += "<br>Touch moved (" + event.changedTouches[0].clientX + "," + event.changedTouches[0].clientY + ")";
                break;
        }
    }
}
document.addEventListener("touchstart", handleTouchEvent, false);
document.addEventListener("touchend", handleTouchEvent, false);
document.addEventListener("touchmove", handleTouchEvent, false);

以上代碼會跟蹤屏幕上發生的一次觸摸操作。爲簡單起見，只會在有一次活動觸摸操作的情況下輸出信息。當touchstart事件發生時。會將觸摸的位置信息輸出到

元素中。當touchmove事件發生時，會取消其默認行爲，阻止滾動（觸摸移動的默認行爲是滾動頁面），然後輸出觸摸操作的變化信息。而touched事件則會輸出有關觸摸操作的最終信息。注意，在touched事件發生時，touched集合中就沒有任何Touch對象了，因爲不存在活動的觸摸操作;此時，就必須轉而使用changeTouchs集合。

這些事件會在文檔的所有元素上面觸發，因而可以分別操作頁面的不同部分。在觸摸屏幕上的元素時，這些事件發生的數序如下：

1. touchstart
2. mouseover
3. mousemove
4. mousedown
5. mouseup
6. click
7. touchend

支持觸摸事件的瀏覽器包括iOS版Safari、Android版WebKit、beta版Dolfin、OS6+中的BlackBerry WebKit、Opera Mobile 10.1和LG專有OS中的phantom瀏覽器。目前只有IOS版Safari支持多點觸屏。桌面版Firefox 6+和Chrome也支持觸摸事件。

2.手勢事件

IOS 2.0中的Safari還引入了一組手勢事件。當兩個手指觸摸屏幕時就會產生手勢，手勢通常會改變顯示項的大小，或者旋轉顯示項。有三個手勢事件，分別如下。

• gesturestart:當一個手指已經按在屏幕上面另一個手指有觸摸屏幕時觸發。
• gesturechange:當觸摸屏幕的任何一個手指的位置發生變化時觸發。
• gestureend:當任何一個手指從屏幕上面移開時觸發。

只有兩個手指都觸摸到事件的接收容器時纔會觸發這些事件。在一個元素上設置事件處理程序，意味着兩個手指必須同時位於該元素的範圍之內，才能觸發手勢事件（這個元素就是目標）。由於這些事件冒泡，所以將事件處理程序放在文檔上也可以處理所有手勢事件。此時，事件的目標就是兩個手指都位於其範圍內的那個元素。

觸摸事件和手勢事件之間存在某種關係。當一個手指放在屏幕上時，會觸發touchstart事件。如果另一個手指又放在了屏幕上，則會先觸發gesturestart事件。如果另一個手指又放在了屏幕上，則會先觸發gesturestart事件，隨後觸發基於該手指的touchstart事件。如果一個或兩個手指在屏幕上滑動，將會觸發gesturechange事件，但只要有一個手指移開，就會觸發gestureend事件，緊接着又會觸發基於該手指的touchend事件。

與觸摸事件一樣，每個手勢事件的event對象都包含着標準的鼠標事件屬性：bubbles、cancelable、view、clientX、clientY、screenX、screenY、detail、altKey、shiftKey、ctrlKey和metaKey。此外，還包含兩個額外的屬性：rotation和scale。其中,rotation屬性表示手指變化引起的旋轉角度，負值表示逆時針旋轉，正值表示順時針旋轉（該值從0開始）。而scale屬性表示兩個手指間距的變化情況（例如向內收縮會縮短距離）;這個值從1開始，並隨距離拉大而增長，隨距離縮減而減小。

下面是使用手勢事件的一個示例：

function handleGestureEvent(event) {
    var output = document.getElementById("output");
    switch(event.type) {
        case "gesturestart":
            output.innerHTML = "Gesture started (rotation=" + event.ratation +",scale=" + event.scale + ")";
            break;
        case "gestureend":
            output.innerHTML += "<br>Gesture ended (rotation+" + event.rotation + ",scale=" + event.scale + ")";
            break;
        case "gesturechange":
            output.innerHTML += "<br>Gesture changed (rotation+=" + event.rotation + ",scale+" + event.scale + ")";
            break;
    }
}
document.addEventListener("gesturestart", handleGestureEvent, false);
document.addEventListener("gestureend", handleGestureEvent, false);
document.addEventListener("gesturechange", handleGestureEvent, false);

與前面演示觸摸事件的例子一樣，這裏的代碼只是將每個事件都關聯到同一個函數中，然後通過該函數輸出每個事件的相關信息。