移動瀏覽器上的多點觸控？

Question

我有這個瀏覽器遊戲，我正在開發的樂趣。

但我試圖讓它在移動瀏覽器中也能正常工作。但是當我一次按下多個按鈕時，我似乎無法使它工作。

我有這個遊戲，你可以左右移動並跳轉。 （見下圖）

touch buttons in game http://www.userhome.org/mobilegame.png

我的代碼如下所示：

function inittouchcontrols() { 

$("body").append("<div id='btn_moveleft' keyid='37'></div><div id='btn_moveright' keyid='39'></div><div id='btn_jump' keyid='38'></div>"); 

    $('body').on('taphold', function (e) { 
     e.preventDefault(); 
    }); 

    $('body').on('tap', function (e) { 
     e.preventDefault(); 
    }); 

    $('body').on('vmouseover', function (e) { 

     if($(e.target).attr("keyid") != undefined) 
      $(e.target).css("background-color", "red"); 

     window["keyDown" + $(e.target).attr("keyid")](); 

     c_key_x = c_key_left + c_key_right; 
     c_key_y = c_key_up + c_key_down; 

     $("#pushedkeys").html("keys: " + c_key_x + " " + c_key_y); 

    }); 

    $('body').on('vmouseout', function (e) { 

     if ($(e.target).attr("keyid") != undefined) 
      $(e.target).css("background-color", "aqua"); 

     window["keyUp" + $(e.target).attr("keyid")](); 

     c_key_x = c_key_left + c_key_right; 
     c_key_y = c_key_up + c_key_down; 


     $("#pushedkeys").html("keys: " + c_key_x + " " + c_key_y); 

    }); 

} 

使用jQuery移動vmouseover和vmouseout檢測在水上彩色印刷機的div。但它一次只能按一個按鈕。

所以我的問題是：
有沒有什麼辦法可以實現我的代碼多點觸控？

Answer 1

可以使用觸摸事件API touchstart，touchmove，和touchend（https://developer.mozilla.org/en-US/docs/Web/Guide/Touch_events）

每個會觸動集合，除其他事項外，連接到它的事件對象。

有一點要注意的是，觸摸特性不包括在正常的jQuery事件對象，所以你必須使用event.originalEvent來訪問它們

$('#ele').on('touchstart', function(e) { 
    var touches = e.originalEvent.touches; 
});