在移动浏览器上使用多点触控? [英] Multitouch on a mobile browser?

问题描述

我有一款正在开发的浏览器游戏，很有趣.

I have this browser game I'm developing for fun.

但是我也在尝试使其在移动浏览器中也可以工作.但是当一次按下多个按钮时，我似乎无法使其正常工作.

But I'm trying to make it work in mobile browsers too. But I can't seem to make it work when pressing multiple buttons at once.

我有这个游戏，您可以左右移动并跳跃. (请参见下图)

I have this game where you can move left and right and jump. (see the picture below)

游戏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上的按压.但是一次只能按下一个按钮.

I use jQuery mobile vmouseover and vmouseout to detect presses on the aqua colored divs. But it will only push one button at a time.

所以我的问题是:
有什么办法可以对代码实现多点触控?

So my question is:
Is there any way I can implement multitouch to my code?

推荐答案

您可以使用touch事件api touchstart，touchmove和touchend(

You can use the touch event api touchstart, touchmove, and touchend (https://developer.mozilla.org/en-US/docs/Web/Guide/Touch_events)

除其他事项外，每个事件都会附加到其事件对象上.

each will a touches collection, among other things, attached to it's event object.

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

One thing to note is that the touch properties aren't included in the normal jQuery event object so you have to use event.originalEvent to access them

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

这篇关于在移动浏览器上使用多点触控?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！