移动 Safari 事件问题

发布于 2024-09-09 03:23:41 字数 545 浏览 3 评论 0原文

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

单击使菜单变得可见的按钮
单击网页上非菜单的任意位置

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

我注意到，只有当我单击已分配了 onclick 事件的另一个元素时，window onclick 事件才会触发。如果我单击未分配事件的元素，则窗口的onclick 事件永远不会触发。如果我单击显示菜单的按钮，它会与与该按钮相关的事件一起触发。

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

清醇 2024-09-16 03:23:41

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

首先，我使用 Modernizr 的 addTest 添加自定义 Modernizr 类用于测试 iOS 的插件 API，这将相应地添加类 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 内容指南。）通过在包装器上插入此空事件，事件将向上冒泡到正文。

如果您不使用这些库来执行严格的 JavaScript，则可以在 HTML 标记中实现相同的效果。

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

这对我来说可以在触摸文档主体上的任何位置时隐藏工具提示。您的里程可能会有所不同。

I'v been encountering this same problem. Here is what worked for me. (Note: I am working within a Modernizr and jQuery context)

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.

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

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.

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.

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.

回复收藏 0 原文

黯淡〆 2024-09-16 03:23:41

只需将虚拟 onclick 处理程序添加到 html body 对我来说很有效：

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

Simply adding the dummy onclick handler to the html body works for me:

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

回复收藏 0 原文

苦笑流年记忆 2024-09-16 03:23:41

这是一个老问题，但今天我也遇到了同样的问题。

我发现使用 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
  });
}

This is an old question, but I struggled with the same thing today.

I found that using touchstart event works.

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

回复收藏 0 原文

长发绾君心 2024-09-16 03:23:41

您可以将 onclick="void(0);" 添加到覆盖整个页面的某些

中，这样无论发生什么情况，您始终都会点击某个具有 onclick 事件的元素。但这不是一个很好的解决方案。

我不希望将 onclick 事件绑定到窗口。为什么不创建一个包含该事件的容器

呢？然后像现在一样处理它。

回复收藏 0 原文

晌融 2024-09-16 03:23:41

你还可以：

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

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

但这有问题。您不会希望在每个触摸设备上都执行此操作。仅适用于不具备指点设备的触摸设备（例如，带触摸屏的笔记本电脑）。

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

文章的结论是这样的：

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

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

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. If you’re having bubbling problems, just add an empty-function event handler anywhere between the body and the element, and you’re set to go. But it shouldn’t be necessary.

回复收藏 0 原文

~没有更多了~