Hammer.js 防止在 Android Webview 中点击超链接

Question

这是一个 Hammer.js 问题，不会在桌面浏览器中发生。我已经在使用 WebView

的 WIP Android 应用程序中验证了这一点

编辑：我还验证了这种情况发生在 "Internet" 浏览器（不是 Chrome）上 Android（4.4.2 如果有帮助的话）。

给定以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
    <title>Test</title>

    <script type="text/javascript" language="Javascript" src="jquery-1.11.3.min.js"></script>
    <script type="text/javascript" language="Javascript" src="hammer.js"></script>

    <style type="text/css">
        #wrap { position:fixed; top:0px; bottom:0px; left:0px; right:0px; background:#00f; color:#fff; font-size:24px; text-align:center; }
        #wrap a, #wrap a:visited { color:#fff; }
    </style>
</head>
<body>
    <div id="wrap">
        <a href="http://www.whosebug.com/">Stack Overflow</a>
    </div>
    <script type="text/javascript" language="Javascript">
        var hammerobj = new Hammer ($('#wrap')[0]);
    </script>
</body>
</html>

当我尝试在我的应用程序中单击 link 时，有时会转到 link，有时不会。这似乎完全是随机的，但可能有某种超时 Hammer.js 用来确定是否接受 "tap".

删除 "var hammerobj..." 行，使其只是 HTML（没有 Javascript）显然可以使 link 在所有设备上始终正常工作。这是一个 Hammer.js 问题。

我的问题是：

有谁知道如何修复上面的代码以允许所有 link 点击、表单提交等每次都触发，同时仍然允许我使用 Hammer.js 进行平移，刷卡等？

谢谢！

Answer 1

我自己设法解决了这个问题。显然我的代码中的一个错误导致 300 毫秒的点击延迟持续存在并阻止了多次点击。

如果有人正在阅读并且感到好奇，设备上存在 300 毫秒的点击延迟，因此浏览器可以确定您是否在双击。有几个 Javascript 库可用于删除它。我个人使用 https://github.com/ftlabs/fastclick.

的 FastClick

<script type="text/javascript" language="Javascript" src="fastclick.js"></script>
<script type="text/javascript" language="Javascript">
    FastClick.attach (document.body);
</script>

希望对大家有所帮助！

Hammer.js 防止在 Android Webview 中点击超链接

Hammer.js preventing hyperlink clicks in Android Webview

javascript

android

webview

android-webview

hammer.js