使用 twitter bootstrap 子菜单防止在移动 safari 上触摸失败答案

【问题标题】：Prevent touch fall through on mobile safari using twitter bootstrap submenu使用 twitter bootstrap 子菜单防止在移动 safari 上触摸失败
【发布时间】：2014-02-12 07:58:42
【问题描述】：

我正在开发一个网页，该网页使用 twitter bootstrap 创建带有子菜单的下拉菜单。在桌面浏览器上一切正常，但是当我在 iPad 上的移动 Safari 中打开它时，我遇到了问题。如果子菜单下方有任何类型的输入，而不是跟随该链接，则触摸事件会转到输入。所以如果子菜单项下面有文本输入，光标就会进入那个框。

请注意，这只发生在子菜单上，而不是主要下拉菜单上。此外，当它后面没有任何内容时，子菜单项也可以正常工作。有什么想法吗？

【问题讨论】：

标签： twitter-bootstrap mobile-safari submenu fall-through

【解决方案1】：

今天我被类似的问题困扰了一段时间。

我遇到的问题是，底层元素是 HTML5 视频。 iOS 不允许在视频元素之上进行任何叠加。因此，我添加了一个 jQuery 方法，该方法在单击菜单按钮时隐藏视频元素。类似的东西可能适用于您的文本输入。

<script type="text/javascript">             
            jQuery(function() { 
                if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
                    jQuery("#menu-button").click(function() {
                        jQuery(".video-content").toggle();
                    });
                }
            });
    </script>

【讨论】：