在iOS上处理jQuery Mobile点击事件后防止点击事件

Posted 2023-05-09

【中文标题】在iOS上处理jQuery Mobile点击事件后防止点击事件

【英文标题】：Prevent click event after handling jQuery Mobile tap event on iOS

【发布时间】：2013-12-20 00:35:55

【问题描述】：

为了提高我们在 iPad 上的 web 应用程序的响应能力，我从响应 click 事件切换到响应 jQuery Mobile“tap”事件。它运行良好，响应速度更快，但它引入了一个新错误。

当用户在 iPad 上点击屏幕时，ios 会发送 jQuery Mobile 将其视为“点击”的 TOUCHSTART 和 TOUCHEND 事件。但是 300 毫秒后，iOS 发送了一个“点击”事件。如果我在“点击”发生之前通过前进到下一页来响应“点击”，那么下一页会收到“点击”，如果新页面上的按钮恰好出现在点击的位置，那么它会被点击.

我目前的解决方法是向用户提供视觉反馈以响应“点击”，但等待“点击”后再进入下一页。

我的问题是是否可以处理“点击”并以某种方式告诉 Safari 或 iOS 根本不发送“点击”。

【参考方案1】：

你知道的；

$('elementsSetThatCanBeTapped').on('tap', function(e) 
   e.preventDefault();
   e.stopPropagation();
   $(this).off('click');
)

【讨论】：

看起来 e.preventDefault() 是赢家。 e.stopPropogation() 没有效果。

如果它有帮助，我从不写一个没有另一个，preventDefault 和 stopPropagation，也许并不理想，但总是有效

请谁投反对票可以添加一个原因，因为是公认的答案并解决了问题

不要这样做off('click') - 如果设备同时具有触摸屏和鼠标（如触摸笔记本电脑），您可能会混淆用户。

@SyamsoulAzrien 因为off('click') 完全删除了点击处理程序，一旦发生点击，将不再识别鼠标点击。

【参考方案2】：

在发生点击时在同一位置注册的点击事件称为幽灵点击。 jQuery Mobile 在他们的 vmouse 事件中有部分解决方案。

但要全面了解您的选择，您不能错过：http://www.appwards.nl/blog/2013/01/26/javascript-powered-webapps-and-click-versus-tap

【参考方案3】：

您应该能够添加 return false 或 e.stopPropagation() 并将相同的函数附加到点击和单击，这样只会触发其中一个事件。

【参考方案4】：

如果您仍然希望能够在没有触摸屏的计算机上使用网络应用程序，您可能需要考虑将 click 事件与 fastclick 库一起使用：https://github.com/ftlabs/fastclick 该库自动消除了 300ms 延迟。