在 iphone safari 上滑动会导致切换触发错误

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 桌面上安装了 developer 并且没有 js 错误。 在幻灯片显示上，内联设置为无，就像点击时一样。 没有发生填充或覆盖问题。

任何帮助将不胜感激。

Answer 1

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

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

我使用的脚本

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

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

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

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

解决方案

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

正如我上面提到的，当浏览器超过移动断点时，有一个调整大小的功能应该重新隐藏东西。最初的调整大小功能在 IMO 中确实不是最理想的，所以我选择更新它只是出于直觉。

旧

$(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 团队的说法，这是与 .resize() 关联的 Safari/iOS 的错误。注意：这不是 jQuery 错误，问题仅与该事件有关。

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

请注意，当响应者使用 POJO 事件侦听器而不是 jQuery 等效事件时，响应者表示问题已得到解决。他们提供的示例实际上并没有处理 matchMedia，但是我想我可以推断正在发生的事情：

我的理论

我相信 Safari 在滚动时错误地触发了 jQuery 的 .resize() 事件，这会导致脚本在不应该触发时触发。我相信我的问题已通过 match media 解决，因为即使脚本重新触发，它也不会做任何事情，因为 matchMedia 语句评估为 false，而不是通过 $(window).width() 查看窗口宽度。

无论哪种方式，我希望这对您或其他人有所帮助。