jQuery click 事件处理程序在 iOS 设备上无法正常工作答案

【问题标题】：jQuery click event handlers not working properly on iOS devicesjQuery click 事件处理程序在 iOS 设备上无法正常工作
【发布时间】：2023-03-24 23:26:01
【问题描述】：

相关页面包含 3 个锚标记元素。当点击这些锚标记中的一个时，它应该触发一个隐藏当前 div 并显示另一个 div 的 jQuery 函数 - 将用户移动到顺序中的下一个进程。

在 PC 和 Android 设备上一切正常，但在 iOS 设备上却不行。

在这个网站上四处搜索后，我遇到了许多建议的解决方案，但似乎都没有解决问题。我试过了：

一起删除 href 属性（以及仅使用 #）
移除锚点的所有悬停效果
将 jQuery 从 .on('click', function() 更新为 .bind('click touchstart', function()
向锚点添加空白onclick="" 属性
将锚的样式属性设置为cursor: pointer

3个锚标签的代码：

<a href="#top" class="tin-size-btn" onclick="">Add</a>

jQuery：

$('.tin-size-btn').css('cursor','pointer');
$('.tin-size-btn').bind('click touchstart', function(){ ...

【问题讨论】：

尝试像这样在css文件中添加游标指针--- cursor:pointer;或者看看这个 --- stackoverflow.com/questions/15095868/…
该代码应该可以正常工作，请参阅jsbin.com/zahiguni/3 示例。您的页面中可能存在另一个影响行为的库。你能用一个链接和 jQuery 库复制这个问题吗？
试过用光标直接进入CSS，还是不行。这是我刚刚注意到的一个有趣的差异，如果“点击”中的第一个（三个）锚标签，它工作得很好。如果是第二个或第三个，页面会冒泡到锚点，但 jQuery 不会运行。这可能是某种事件委托问题吗？

标签： javascript jquery ios

【解决方案1】：

我认为您应该只为智能手机或平板电脑等触控界面保留 touchstart 事件。同样，您可以考虑使用 touchend 代替 touchstart，而不是 touchstart，因为您可能希望在触摸完成后触发操作。

$('.tin-size-btn').bind('touchend', function(){ ...

【讨论】：

现代移动浏览器和网络视图专门从触摸事件合成鼠标等效事件，因此您不必这样做。
你是对的。不过，我记得在注册 click 和 touchstart 后遇到了同样的问题：两个事件同时触发了回调函数......所以通过限制为一个事件，它可能会解决这里的情况。