移动 Safari 事件问题

Question

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

单击导致菜单可见的按钮
单击网页上不是菜单的任意位置

我对第二个选项进行编码的方式是将onclick事件绑定到window元素，并让它比较用户单击菜单位置的位置，以确定是否应该隐藏菜单。 这在 Firefox 和 Safari 中非常有效，但在 Mobile Safari 中却失败了。

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

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

Answer 1

我一直遇到同样的问题。 这对我有用。 （注意：我在 Modernizr 和 jQuery 上下文中工作）

首先，我使用Modernizr 的 addTest Plugin 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 内容指南）。通过在包装器上插入这个空事件，事情会冒泡到正文。

如果您在不使用这些库的情况下执行 strait JavaScript，则可以在 HTML 标记中实现相同的效果

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

当我触摸文档正文的任何地方时，这对我有用以隐藏工具提示。 你的旅费可能会改变。

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 处理程序添加到 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 4

你也可以：

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

不知道苹果的那些“工程师”在做什么。 哈哈。

不过这有问题。 您不会希望在每个触摸设备上都这样做。 只有没有指针设备的触摸设备（例如带触摸屏的笔记本电脑）。

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

文章的结论是这样的：

所以我不明白为什么会这样，但肯定是这样。 如果您遇到冒泡问题，只需在主体和元素之间的任何位置添加一个空函数事件处理程序，您就可以开始了。 但这应该没有必要。

Answer 5

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

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

移动 Safari 事件问题

问题描述

5 个解决方案

解决方案1
8 2011-02-14 20:08:32

解决方案2
1 2013-12-03 11:22:13

解决方案3
1 2011-05-08 22:59:37

解决方案4
0 2014-11-11 23:02:38

解决方案5
0 2010-07-16 06:25:41

移动 Safari 事件问题

问题描述

5 个解决方案

解决方案1 8 2011-02-14 20:08:32

解决方案2 1 2013-12-03 11:22:13

解决方案3 1 2011-05-08 22:59:37

解决方案4 0 2014-11-11 23:02:38

解决方案5 0 2010-07-16 06:25:41

解决方案1
8 2011-02-14 20:08:32

解决方案2
1 2013-12-03 11:22:13

解决方案3
1 2011-05-08 22:59:37

解决方案4
0 2014-11-11 23:02:38

解决方案5
0 2010-07-16 06:25:41