如何减少 JavaScript 触摸输入的触摸延迟？

Question

我正在尝试使用 HTML5 和 JavaScript 为 ChromeOS 构建一个销售点应用程序。我在前端使用 Materialise 和 jQuery。当我尝试使用屏幕数字键盘快速输入数字时，有时数字会被跳过。一个很好的例子是尝试键入 1752703，因为这是我当前工作的员工 ID。尽管 CSS 效果表明我推了所有数字（涟漪效应），但我最终可能会得到类似 17203 而不是完整数字的结果。

有什么方法可以提高触摸性能吗？这是我使用的屏幕类型吗？什么可能导致这种情况发生？如果是因为我的 Chromebook 是电容式的，那没什么大不了的，因为我可以将其部署在任何可以安装 Chromium OS 至运行的设备上。但如果它是我可以改进的程序化的东西，那是我想采取的第一步。

这是我用来输入整数的基本代码：

$(".numBtn").click(function(){
 input(Number($(this).text()));
});

这是一个实际的例子（抱歉缺乏样式）：

Live Demo

Answer 1

第一个

问题似乎不是设备本身，而是具有支持双指缩放.

的触控设备的效果

在大多数这些设备上，默认情况下有 300-350 毫秒的点击延迟，这允许大多数用户双击，或者如前所述，双指缩放。

Google 在 2014 年针对此问题提出了解决方案，当时他们通过仍然保持双指缩放功能来消除此延迟。⁽¹⁾

此问题的快速修复仅是 <head>

中的一行代码

<meta name="viewport" content="width=device-width">

此元标记将仅通过告诉浏览器“这是我需要显示的方式来禁用您网站的缩放功能，因此无需缩放页面”。它的目的主要是为了让响应式设计的网站有更好的用户体验。

我已经使用新的元标记测试了您的网站，延迟似乎消失了。当你快速点击时，仍然会有很小的延迟，但大多数用户不会这么快。

第二个

另一个可能的解决方案是使用一个名为 Tappy 的插件，它将点击事件替换为点击事件，承诺“它将允许您在触摸设备上立即执行代码，消除 300 毫秒的延迟点击事件有⁽²⁾."

可以在 [此处][3] 找到插件存储库，您还可以在其中查看实现说明 - 尤其是这个，它是一个修改版本，将 tap 事件绑定到所有 <a>元素：

$(document).ready(function(){
    $("a").each(function(){
        $(this).bind("tap", function(){
            window.location.href = this.href;
        });
    });
});

请注意，您需要 jQuery 才能使用此插件。如果您不使用 jQuery，请发表评论，我将提供一个普通的 JavaScript（潜在）解决方案。

参考资料

(1): https://developers.google.com/web/updates/2013/12/300ms-tap-delay-gone-away

(2): https://github.com/filamentgroup/tappy/#why

如何减少 JavaScript 触摸输入的触摸延迟？

How Can I Decrease Touch Lag for JavaScript Touch Input?

html

javascript

css

jquery

touch

第一个

第二个

参考资料