touchEvent.touches.length 在 Android 上始终返回 1

Question

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

在我的应用程序流程中，动态创建 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）我总是通过alert()得到“1”在 touchstart 事件之后调用，即使我使用多个手指；因此，路线始终在开关盒内：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 设备上是否存在与此相关的已知问题和/或如何解决它？
提前谢谢你，费德里科

Answer 1

现在是 2023 年了，我也遇到了非常相似的问题。如果我只用一根手指按，警报会正常工作，但如果我按两根手指，则会发出第一个和第二个警报（1 根和 2 根手指）。如果我再次用一根手指点击，两个警报都会重新出现