有没有办法防止橡皮筋，但仍然允许“点击”事件？答案

【问题标题】：Is there a way to prevent rubber banding but still allow "click" events?有没有办法防止橡皮筋，但仍然允许“点击”事件？
【发布时间】：2013-10-03 07:18:17
【问题描述】：

我正在构建一个 html 5 游戏，并且刚刚开始在我的 iPad 上进行测试（我相信 iOS 6，绝对不是 iOS 7）。当我玩游戏时，我想避免使用橡皮筋，但我也想对滑动事件做出反应。以下是我的做法：

$("#game").on("touchmove", false) #prevent rubber banding on iOS
hammer = $('#game').hammer({swipe_velocity: .05})
hammer.on "swipeup", (event) -> root.core.handleKeyDown(root.constants.UP); stopProp(event)
hammer.on "swipedown", (event) -> root.core.handleKeyDown(root.constants.DOWN); stopProp(event)
hammer.on "swipeleft", (event) -> root.core.handleKeyDown(root.constants.LEFT); stopProp(event)
hammer.on "swiperight", (event) -> root.core.handleKeyDown(root.constants.RIGHT); stopProp(event)

问题是，我希望人们能够点击#game 并让它暂停。我的代码的第一行似乎妨碍了这一点，我想了解原因。我的游戏事件监听器正在监听这样的“点击”事件：

$("#game").on "click", (event) ->

奇怪的是，如果我“真正努力”，它“有时”会起作用。我不知道这是为什么。但是，如果我多次按下它，它最终会起作用。

另一个奇怪的事情是，如果我注释掉第一行，点击会暂停游戏，但它似乎总是有半秒的延迟。而且我不认为这是出于性能原因，因为滑动非常灵敏。

有人可以解释如何避免橡皮筋和允许处理点击事件吗？还要解释我犯的错误？我不明白“单击”和“点击”以及“鼠标按下”和“触摸”如何一起工作。

【问题讨论】：

您是本地移植到 iOS 还是仅仅在浏览器中运行？
@Grant 只是在 iPad 上的 safari 浏览器中运行。有没有更合适的标签可以使用？

标签： javascript ios coffeescript webpage hammer.js

【解决方案1】：

答案在这篇官方教程中：https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW6

添加一个虚拟的 onclick 处理程序 onclick = "void(0)"，以便 iOS 上的 Safari 将 span 元素识别为可点击元素，如清单 6-2 所示。

我不确定为什么这个“touchmove”处理程序会影响这个，但遵循这个建议解决了我的问题。

也就是说，每次我点击它之前仍然有大约 0.5-1.0 秒的延迟，这真的让我很恼火。我还没弄清楚是什么原因造成的。

【讨论】：