移动Safari事件问题

Question

我设计了一个网站,其菜单最初是不可见的.当用户单击按钮时,菜单变为可见.用户可以通过两种方式隐藏现在可见的菜单:

我编写第二个选项的方法是将onclick事件绑定到窗口元素,并将其与用户单击菜单位置的位置进行比较,以确定是否应隐藏菜单.这在Firefox和Safari中很有用,但在Mobile Safari中失败了.

我注意到,当我点击另一个已经分配了onclick事件的元素时,窗口 onclick事件才会触发.如果我点击没有分配事件的元素,窗口的onclick事件永远不会触发.如果我点击显示菜单的按钮,它会随着与按钮相关的事件一起激活.

是否可以将事件分配给Mobile Safari中的窗口元素？

Answer 1

我遇到过同样的问题.这对我有用.(注意:我在Modernizr和jQuery上下文中工作)

首先,我使用Modernizr的addTest插件API添加一个自定义Modernizr类来测试iOS,这将添加类appleios或no-appleios相应的.

因为在我的研究中,body似乎是在它自己的议程上引发事件,我采取一些预防措施,将所有文档的内容包含在iOS上下文中的元素中.然后我为这个元素添加一个事件处理程序.

$(".appleios body").wrapInner('<div id="appleios-helper" />');
$("#appleios-helper").bind("mouseup", function(){return;});

之前在这个帖子中建议的是使用void(0).我做了一些快速测试,发现void(0)因为事件只是没有引起身体的触摸被识别.当我插入我自己的"空"功能时,function(){return;}开始工作的形式.

这一切都取决于Mobile Safari中没有事件被触发的事实,除非该元素明确地具有要触发的事件(Safari Web内容指南).通过在包装器上插入这个空事件,事物将会冒泡到身体.

如果您正在使用这些库中没有这些库,则可以在HTML标记中实现相同的效果

<html>
...
<body>
<div id="appleios-helper" onmouseup="function(){return;}">
...
</div>
</body>
</html>

这有助于我在触摸文档正文的任何位置时隐藏工具提示.你的旅费可能会改变.

Answer 2

您可以添加onclick="void(0);"一些<div>覆盖整个页面的元素，这样无论如何，您总是会单击具有事件的元素onclick。但这不是一个很好的解决方案。

我不希望将onclick事件绑定到窗口。为什么不创建一个包含<div>该事件的容器。然后像现在一样处理它。