Question

目标

单击时关闭锚标记的父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>

Answer 1

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

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

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

这将触发点击非触摸设备并触摸触摸设备上的触摸屏。

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

Answer 2

在iOs中a标记是可点击的元素，因此触摸该链接将触发鼠标事件（包括click）。

此代码

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

将在iOs上正常运作。

有关详细信息：http://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html

Answer 3

请参阅http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

对于iOS鼠标事件，例如点击不要bubbe，除非：

事件的目标元素是链接或表单字段。
目标元素或其任何祖先（包括但不包括该元素）具有为任何鼠标事件设置的显式事件处理程序。此事件处理程序可能是一个空函数。
目标元素或其任何祖先（包括文档）都有一个游标：指针CSS声明。

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

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

3 个答案: