移动Safari事件问题 [英] Mobile Safari Event Issue
问题描述
我设计了一个网站，其菜单最初是不可见的。当用户单击按钮时，菜单变为可见。用户可以通过两种方式隐藏现在可见的菜单：
I have designed a website with a menu that is initially invisible. When the user clicks on a button, the menu becomes visible. There are two ways for the user to hide the now visible menu:
- 点击导致菜单可见的按钮
- 点击网页上不是菜单的任何地方
我编写第二个选项的方式是将onclick事件绑定到窗口元素，并将其与用户单击菜单位置的位置进行比较，以确定是否应隐藏菜单。这在Firefox和Safari中很有用，但在Mobile Safari中失败了。
The way I have coded the second option is to tie an onclick event to the window element, and have it compare where the user clicked to the menu's position to determine if the menu should be hidden. This works great in Firefox and Safari, but it fails in Mobile Safari.
我注意到窗口 onclick事件仅在我点击时触发已分配onclick事件的另一个元素。如果我点击没有分配事件的元素，窗口的onclick事件永远不会触发。如果我点击显示菜单的按钮，它会随着与按钮相关的事件一起激活。
I noticed that the window onclick event only fires when I click on another element with an onclick event already assigned. If I click on an element with no event(s) assigned, the window's onclick event never fires. If I click on the button which displays the menu, it fires along with the event tied to the button.
是否可以将事件分配给窗口<移动Safari中的/ strong>元素？
Is it possible to assign events to the window element in Mobile Safari?
推荐答案
我遇到了同样的问题。这对我有用。 （注意：我在Modernizr和jQuery上下文中工作）
I'v been encountering this same problem. Here is what worked for me. (Note: I am working within a Modernizr and jQuery context)
首先，我使用 Modernizr的addTest插件API 测试iOS，它将添加类 appleios 或 no-appleios 相应的。
First, I add a custom Modernizr class using Modernizr's addTest Plugin API to test for iOS, which will add the class appleios or no-appleios accordingly.
因为在我的研究中，正文似乎在它自己的议程上发布事件，我采取了一些预防措施，将所有文档的内容与iOS上下文中的元素包装在一起。然后我为这个元素添加一个事件处理程序。
Because in my research the body seems to fire events on it's own agenda, I am taking a little precaution by wrapping all the document's content with an element in an iOS context. Then I add an event handler to this element.
$(".appleios body").wrapInner('<div id="appleios-helper" />');
$("#appleios-helper").bind("mouseup", function(){return;});
此线程前面建议的是使用 void（0）。我做了一些快速测试，发现 void（0）因为事件不会导致身体上的触摸被识别。当我以 function（）{return;} 的形式插入我自己的空函数时，事情开始起作用了。
What was suggested earlier in this thread is using void(0). I did some quick testing, and found that void(0) as the event just wasn't causing touches on the body to be recognized. When I plugged in my own "empty" function in the form of function(){return;} things started working.
这一切都取决于Mobile Safari中没有事件被触发的事实，除非该元素明确地具有要触发的事件（ Safari Web内容指南。）通过在包装器上插入这个空事件，事物会冒泡到身体。
This all hinges on the fact that no events are fired in Mobile Safari unless the element explicitly has events to fire (Safari Web Content Guide.) By inserting this empty event on the wrapper, things will bubble up to the body.
如果您正在使用这些库中没有这些库，可以在HTML标记中实现相同的效果
If you're doing strait JavaScript with none of these libraries, the same effect could be achieved in the HTML markup
<html>
...
<body>
<div id="appleios-helper" onmouseup="function(){return;}">
...
</div>
</body>
</html>
这有助于我在触摸文档正文的任何位置时隐藏工具提示。您的里程可能会有所不同。
This worked for me to hide tooltips when touching anywhere on the document's body. Your mileage may vary.
这篇关于移动Safari事件问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
