移动 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:用户可以通过两种方式隐藏现在可见的菜单：
- Click the button that caused the menu to become visible单击导致菜单可见的按钮
- Click anywhere on the web page that isn't the menu单击网页上不是菜单的任意位置
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.我对第二个选项进行编码的方式是将onclick事件绑定到window元素，并让它比较用户单击菜单位置的位置，以确定是否应该隐藏菜单。 This works great in Firefox and Safari, but it fails in Mobile Safari.这在 Firefox 和 Safari 中非常有效，但在 Mobile Safari 中却失败了。
I noticed that the window onclick event only fires when I click on another element with an onclick event already assigned.我注意到窗口onclick事件仅在我单击已分配了onclick事件的另一个元素时触发。 If I click on an element with no event(s) assigned, the window 's onclick event never fires.如果我点击一个没有分配事件的元素，窗口的onclick事件永远不会触发。 If I click on the button which displays the menu, it fires along with the event tied to the button.如果我单击显示菜单的按钮，它会与绑定到按钮的事件一起触发。
Is it possible to assign events to the window element in Mobile Safari?是否可以将事件分配给 Mobile Safari 中的window元素？
5 个解决方案
解决方案1
8 2011-02-14 20:08:32
I'v been encountering this same problem.我一直遇到同样的问题。 Here is what worked for me.这对我有用。 (Note: I am working within a Modernizr and jQuery context) （注意：我在 Modernizr 和 jQuery 上下文中工作）
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.首先，我使用Modernizr 的 addTest Plugin API添加一个自定义 Modernizr 类来测试 iOS，这将相应地添加类appleios或no-appleios 。
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.因为在我的研究中， body似乎按照它自己的议程触发事件，所以我通过在 iOS 上下文中用一个元素包装所有文档的内容来采取一点预防措施。 Then I add an event handler to this element.然后我向这个元素添加一个事件处理程序。
$(".appleios body").wrapInner('<div id="appleios-helper" />');
$("#appleios-helper").bind("mouseup", function(){return;});
What was suggested earlier in this thread is using void(0) .在这个线程前面建议的是使用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.我做了一些快速测试，发现void(0)作为事件并没有导致对身体的触摸被识别。 When I plugged in my own "empty" function in the form of function(){return;} things started working.当我以function(){return;}的形式插入我自己的“空”函数时，事情开始起作用了。
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.这一切都取决于这样一个事实，即在 Mobile Safari 中不会触发任何事件，除非元素显式具有要触发的事件（ Safari Web 内容指南） 。通过在包装器上插入这个空事件，事情会冒泡到正文。
If you're doing strait JavaScript with none of these libraries, the same effect could be achieved in the HTML markup如果您在不使用这些库的情况下执行 strait JavaScript，则可以在 HTML 标记中实现相同的效果
<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.你的旅费可能会改变。
解决方案2
1 2013-12-03 11:22:13
This is an old question, but I struggled with the same thing today.这是一个古老的问题，但我今天也遇到了同样的问题。
I found that using touchstart event works.我发现使用touchstart事件有效。
I solved it like this:我是这样解决的：
var isTouchDevice = 'ontouchstart' in document.documentElement;
if (isTouchDevice) {
// Do touch related stuff
$(document).on('touchstart', function (event) {
// Do stuff
});
} else {
// Do non-touch related stuff
$(document).on('click', function () {
// Do stuff
});
}
解决方案3
1 2011-05-08 22:59:37
Simply adding the dummy onclick handler to the html body works for me:简单地将虚拟 onclick 处理程序添加到 html正文对我有用：
<body onclick="void(0)">
Note that I am using usual live event handlers as shown below:请注意，我使用的是常用的实时事件处理程序，如下所示：
function liveHandler( event ) {
var target = event.target; ...}
window.addEventListener(evtype, liveHandler, true);
// evtype such as 'mousedown' or 'click'
// we use the capturing mode here (third parameter true)
解决方案4
0 2014-11-11 23:02:38
You can also:你也可以：
$('body').css('cursor', 'pointer');
No idea what those "engineers" at Apple are doing.不知道苹果的那些“工程师”在做什么。 LOL.哈哈。
This has problems though.不过这有问题。 You wouldn't want to do this on every touch device.您不会希望在每个触摸设备上都这样做。 Only touch devices that don't also have a pointing device (Laptops with Touch Screens, for example).只有没有指针设备的触摸设备（例如带触摸屏的笔记本电脑）。
Source: http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html来源： http : //www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html
The conclusion of the article is this:文章的结论是这样的：
So I don't understand why all this is the case, but it most certainly is the case.
解决方案5
0 2010-07-16 06:25:41
You could just add onclick="void(0);"你可以添加onclick="void(0);" to some <div> that covers the whole page so that no matter what, you are always clicking on an element that has an onclick event.到一些覆盖整个页面的<div>以便无论如何，您总是单击具有onclick事件的元素。 Not a great solution, though.不过，这不是一个很好的解决方案。
I'd prefer not having the onclick event be tied to the window.我不希望将onclick事件绑定到窗口。 Why don't you create a container <div> that has that event on it.为什么不创建一个包含该事件的容器<div> 。 Then handle it just like you currently are.然后像现在一样处理它。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.