2

这是我第一次处理触摸设备，为了在我的网站/webapp 中实现一些基本功能，我需要管理触摸事件。

在我的应用程序流程中，在动态创建了一个 div 之后，我附加了一个 touchstart 事件，该事件调用了一个函数，我希望在该函数中根据同时触摸的数量来管理不同的任务：为了做到这一点，我想使用 touchEvent .changedTouches.length 属性
（https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/changedTouches）。

我有这样的事情：

$("body").append("<div id='myDiv'>Some text...</div>");
touchEvents();
...
function touchEvents() {
    var touches;
    $("#myDiv").on("touchstart", function (e) {
        touches = e.changedTouches;
        alert(touches.length);
        switch (touches.length) {
            case 1:
            {code_block_1}
            break;
            case 2:
            {code_block_2}
            break;
            default:
            {code_block_default}
        }
    });
}
...

当我在 Ios（iPad 2）上使用 Safari 运行它时，如果我用一个、两个（或更多 - 直到 9 个）手指触摸它，我会从警报语句中得到正确的手指数量，并且然后应用程序正确运行，如果我做了两指触摸，进入开关盒：2。

但是当我使用 Android 设备时（我用三星和 NGM 品牌的手机测试它——无论是旧的还是最新的 Android 手机——或者是更新的 Firefox 和 Chrome）我总是在 touchstart 之后调用 alert()得到“1”事件，即使我使用不止一根手指；因此，路线总是在开关箱内：1 选项。

我发现这似乎是由于 touchEvent.touches 列表的奇怪行为。

事实上，如果我有以下代码

$("body").append("<div id='myDiv'>Some text...</div>");
touchEvents();
...
function touchEvents() {
    var touches;
    $("#myDiv").on("touchstart", function (e) {
        touches = e.touches;
        alert(touches.length);
        ...
    });
}

如果我用 2 个手指（同时或一个接一个）触摸表面，我总是会收到两个警报！

（当手指一个接一个地向下移动时，我也会收到第一个正确提示“1”的警报）...

第一个（在两根手指不同时触摸的情况下是第二个）提示“2”，但在关闭此警报后立即触发另一个提示“1”。

作为检查，我还尝试复制并粘贴可在此处找到的示例代码：

https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent/touches

添加三个提醒 e.touches.length 的函数，即

$(document).ready(function() {
    document.getElementById("test").addEventListener('touchstart', function(e) {
        // Invoke the appropriate handler depending on the
        // number of touch points.
        switch (e.touches.length) {
            case 1: handle_one_touch(e); break;
            case 2: handle_two_touches(e); break;
            case 3: handle_three_touches(e); break;
            default: console.log("Not supported"); break;
        }
    }, false);
    function handle_one_touch(e) {
        touches = e.touches;
        alert(touches.length);
    }
    function handle_two_touch(e) {
        touches = e.touches;
        alert(touches.length);
    }
    function handle_three_touch(e) {
        touches = e.touches;
        alert(touches.length);
    }
});

我总是得到“1”，所以它总是只被称为 handle_one_touch(e) 函数。

因此，我认为 changedTouches.length 属性始终为“1”。

有人知道在 Android 设备上是否存在关于此问题的已知问题和/或如何解决它？
提前谢谢你，费德里科

4

0 回答 0