Question

在我的网络应用中，有一个单独的移动设备导航栏。当单击菜单按钮或单击站点中的任何其他位置时，我希望此导航栏折叠。它已经适用于任何移动浏览器，但不适用于Safari移动设备（在Safari中也适用于主页，但不适用于其他页面）。在其他页面中，有一些动态生成的html。似乎click事件对这些内容不起作用。我真的很感激这个问题的解决方案。代码如下。我试过'body'，$（document），window而不是$（'html'）。它也不适合他们。

$('html').click(function(event) {
            var clickover = $(event.target);
var $navbar = $(".navbar-collapse");               
var _opened = $navbar.hasClass("in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {      
    $navbar.collapse('hide');
}
        });

我也尝试了Fixing jQuery Click Events for the iPad中提到的内容。但是那里提到的代码根本没有触发。我在下面尝试过的代码。

var ua = navigator.userAgent,
event = (ua.match(/iPad/i)) ? "touchstart" : "click";

$('body').bind(event, function(e) {
            var clickover = $(event.target);
var $navbar = $(".navbar-collapse");               
var _opened = $navbar.hasClass("in");
if (_opened === true && !clickover.hasClass("navbar-toggle")) {      
    $navbar.collapse('hide');
}

}

我真的很感激我的问题的答案（我正在研究这个问题超过一天，但没有找到解决方案）。

Answer 1

无论如何，我终于找到了解决方案。原因是，iPhone Safari不支持事件委派。我最初的要求是在单击HTML主体时触发click事件。无论如何，问题只发生在Safari移动设备上，我发现原因是，Safari不支持点击事件的事件委托。我通过在主体CSS中添加以下代码来解决它。

cursor: pointer;

我得到答案的资源是， Click event delegation on the iPhone

和

jQuery click events not working in iOS : Answer

Dohab，谢谢你的回答。

Answer 2

您可以为整个页面创建一个div容器，并将其绑定到click事件。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#container").click(function(){
        $(this).hide();
    });
});
</script>
</head>
<body>
    <div id="container">
        <p>If you click anywhere. I will hide</p>
        ...
        ...

    </div>
</body>
</html>

对于某些HTML内容，Click事件在safari mobile中不起作用

2 个答案: