如何在 iOS 设备上用 touchstart 替换 click答案

【问题标题】：How to replace click with touchstart on iOS devices如何在 iOS 设备上用 touchstart 替换 click
【发布时间】：2013-08-13 05:34:37
【问题描述】：

目标

单击时关闭锚标记的父 div。在下面的代码中，我想在用户点击锚标记 close_performance_tt 时隐藏 div performance_tt。

问题

花了几个小时后无法让它在 iOS 设备上运行。适用于其他所有设备，甚至是 BlackBerry 10 设备。

<div id="performance_tt" style="display: none;width: 300px;height: 200;overflow: auto;padding: 5px;background-color: yellow;">
    <div>Website performance has become an important consideration for most sites.
    The speed of a website affects usage and user satisfaction, as well as search engine rankings, a factor that directly correlates to revenue and retention.
    As a result, creating a system that is optimized for fast responses and low latency is key.</div>
    <a id="close_performance_tt" href="#">Close</a>
    <script>
    var userAgent = navigator.userAgent.toLowerCase();
    var isiOS = (navigator.userAgent.match(/(iPad|iPhone|iPod)/g) ? true : false);
    if (isiOS) {
        $("#close_performance_tt").bind('touchstart', function() {
            alert('Touch-start event triggered');
        });
    } else {
        $("#close_performance_tt").bind('click', function() {
            alert('Click event triggered');
        });
    }
    </script>
</div>

【问题讨论】：

为什么不用$("#close_performance_tt").bind('click touchstart', ..) 而不是if..else
但这不是问题的原因，对吧？
您必须确保标志 isiOS 具有正确的值

标签： jquery ipad click touchstart

【解决方案1】：

定义一个稍后可以使用的点击处理程序：

var clickHandler = ('ontouchstart' in document.documentElement ? "touchstart" : "click");

$("a").bind(clickHandler, function(e) {
    alert("clicked or tapped. This button used: " + clickHandler);
});

这将触发非触控设备上的点击和触控设备上的 touchstart。

话虽如此，我强烈建议改用Fast click，并使用常规的点击事件。使用上述解决方案，例如，当您在链接上滑动以滚动页面时，您将触发链接上的“touchstart” - 这并不理想。

【讨论】：

【解决方案2】：

在iOs中a标签是可点击元素，所以点击链接会触发鼠标事件（包括click）。

这段代码

$("#close_performance_tt").bind('click',function() { 
    alert('Click event triggered');                             
});

在 iO 上可以正常工作。

【讨论】：

如果我使用您的代码，我需要单击两次才能收到警报。随后，我需要单击大约 4 次才能显示警报。但是，使用以下代码，警报会一直触发。 $("#close_performance_tt").bind('click touchstart',function() { alert('Event registered.'); });
我只是在我的 iPad 上测试了代码，它运行良好。确保您单击一次，如果您按住或双击它不会触发click 事件。
我没有 iPad。在 iPhone 4S 上进行测试。不工作。我将在几个小时后在 iPad 上进行测试。会回来的。

【解决方案3】：

见http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

对于 iOS 鼠标事件，例如单击，除非：

事件的目标元素是链接或表单域。
目标元素，或者它的任何祖先，直到但不包括，都为任何鼠标事件设置了显式事件处理程序。此事件处理程序可能是一个空函数。
目标元素或它的任何祖先（直到并包括该文档）都有一个光标：指针 CSS 声明。

对我来说最简单的解决方案是在任何地方应用cursor: pointer，以防它是 iOS 触摸设备。由于没有光标，因此没有任何视觉影响

【讨论】：

真正有用的答案小伙伴们，请注意！谢谢，塞巴斯蒂安