Question

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

点击导致菜单可见的按钮
点击网页上不是菜单

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

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

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

Answer 1

简单地将虚拟onclick处理程序添加到html 正文对我有用：

<body onclick="void(0)">

请注意，我使用的是常用的直播活动处理程序，如下所示：

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)

Answer 2

这是一个老问题，但我今天也在努力解决同样的事情。

我发现使用touchstart事件有效。

我解决了这个问题：

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
  });
}

Answer 3

您只需将onclick="void(0);"添加到涵盖整个页面的某些<div>，这样无论如何，您总是点击具有onclick事件的元素。但不是一个好的解决方案。

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

Answer 4

你也可以：

$('body').css('cursor', 'pointer');

不知道那些＆＃34;工程师＆＃34;在Apple正在做。 LOL。

但这有问题。您不希望在每个触摸设备上执行此操作。只能触摸不具备定位设备的设备（例如，带触摸屏的笔记本电脑）。

来源：http://www.quirksmode.org/blog/archives/2014/02/mouse_event_bub.html

文章的结论如下：

所以我不明白为什么会出现这种情况，但事实肯定是这样。如果你遇到冒泡问题，只需在主体和元素之间的任何地方添加一个空函数事件处理程序，然后就可以了。但它没有必要。

移动Safari事件问题

5 个答案: