jquery - 在 iphone safari 上滑动会导致切换到火灾 bug

Question

关于http://inigo.nu (临时项目)

我使用单击 div 来切换显示菜单 ul 使用

html:

<div id="toggle-menu" class="hover">menu</div>

jQuery:

jQuery(document).ready(function(jQuery) {
    jQuery('#toggle-menu').on('click', function() {
        jQuery('nav ul').toggle('slow');
    });
});

仅在iPhone safari上出现奇怪的错误。

点击打开菜单后滑动会使刚刚打开的菜单再次消失。 是什么导致了这种奇怪的行为以及如何解决它？

遗憾的是这篇文章:Safari Browser (iPhone Simulator): How to see/monitor all events being triggered?从未得到答复。因为我喜欢看到触发的事件。

我通过 console.log 编辑了幻灯片事件，但这并没有清除我的情况。

所以我的附带问题是如何最好地调试这样的问题。

我在 Safari 桌面上安装了开发者并且没有 js 错误。 在幻灯片显示上，将内联设置为 none，就像 onclick 一样。 不存在填充或覆盖问题。

如有任何帮助，我们将不胜感激。

Answer 1

我在为我的客户解决同样的问题时发现了你的问题。客户端有一个移动导航，当单击“切换图标”时会显示该导航。最初脚本使用 .toggle().... 是的，从 jQuery 1.9 开始，这是一个已弃用的函数(客户端使用的是 1.7.2 并且无法切换它)，但我使用toggle/slideToggle 复制了您所描述的确切问题.

我将详细解释我的解决方案并标记您可能想要跳过的部分。

我使用的脚本

我正在编辑来解决此问题的脚本是用于导航的。它执行“切换”事件来显示导航区域并检查浏览器是否处于移动宽度(如果不是，则隐藏所有移动元素)。

尝试的解决方案/采取的步骤

我最初尝试从toggle()切换到slideToggle()，只是为了看看会发生什么。毫不奇怪，问题是一样的。

然后，我通过切换相关元素上的显示类来切换到更优化的方法。这看起来工作正常，但最终导致了同样的问题:当你在 iPad 上滚动时，类会自行恢复。

解决方案

这对我来说很有趣，因为我的脚本是一个点击事件，但它是在滚动时触发的。

正如我上面提到的，有一个调整大小功能，当浏览器到达移动断点之上时，该功能应该重新隐藏内容。在我看来，原来的调整大小功能确实不是最理想的，所以我只是凭直觉选择更新它。

旧

$(window).resize(function() {
    if( $(window).width > 700 ) {
        $(".visible").removeClass("visible");
    }
});

新

$(window).resize(function() {
    if ( $(window).matchMedia('(min-width: 788px)').matches ) {
        $(".visible").removeClass("visible");
    }
});

事实证明，使用 matchMedia 正是我一直以来所需要的。不过，我最终保留了类切换:)。

但是，天哪，什么会导致滚动时触发调整大小？根据 jQuery 团队的说法，这是 Safari/iOS 与 .resize() 相关的错误。注意:这不是 jQuery 错误，问题仅与该事件有关。

来源:http://bugs.jquery.com/ticket/14119

请注意，响应者在使用 POJO 事件监听器与 jQuery 等效项时表示问题已解决。他们提供的示例实际上并不涉及 matchMedia，但我认为我可以推断正在发生的事情:

我的理论

我认为 Safari 在滚动时错误地触发了 jQuery 的 .resize() 事件，这导致脚本在不应该触发的时候触发。我相信我的问题已通过匹配媒体解决，因为即使脚本重新启动，它也不会执行任何操作，因为 matchMedia 语句的计算结果为 false，而不是通过 $(window).width() 查看窗口宽度。

无论如何，我希望这对您或其他人有所帮助。