移动浏览器上的多点触控？答案

【问题标题】：Multitouch on a mobile browser?移动浏览器上的多点触控？
【发布时间】：2013-05-10 20:33:45
【问题描述】：

我正在开发这款浏览器游戏以供娱乐。

但我也在尝试让它在移动浏览器中运行。但是一次按下多个按钮时我似乎无法使其工作。

我有这个游戏，你可以左右移动和跳跃。（见下图）

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 mobile vmouseover 和 vmouseout 来检测水色 div 上的压力。但它一次只能按一个按钮。

所以我的问题是：
有什么方法可以在我的代码中实现多点触控？

【问题讨论】：

标签： javascript jquery html mobile browser

【解决方案1】：

您可以使用触摸事件 api touchstart、touchmove 和 touchend (https://developer.mozilla.org/en-US/docs/Web/Guide/Touch_events)

每个都会有一个 touches 集合，除其他外，附加到它的事件对象。

需要注意的一点是，触摸属性不包含在普通的 jQuery 事件对象中，因此您必须使用 event.originalEvent 来访问它们

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

【讨论】：