悬停菜单项需要轻按 2 次而不是 1 次才能在 iPad 上工作答案

【问题标题】：Hover menu items take 2 taps instead of 1 in order to work on iPad悬停菜单项需要轻按 2 次而不是 1 次才能在 iPad 上工作
【发布时间】：2017-01-04 06:49:04
【问题描述】：

On my page 当悬停特定的主菜单项（“nos 餐厅”）时，我会显示一个特定的子菜单。一切都可以在桌面上运行，但在 iPad 上，这个子菜单的项目需要轻按 2 次而不是 1 次（轻按一次没有任何作用）。为什么？

HTML：

<div class='sub_menu_wrap'>
  <div class='menu_la_carte'>
    <?php wp_nav_menu( array('menu' => 'Menu La Carte' )); ?>
  </div>
  <div class='menu_nos_restaurants'>
    <?php wp_nav_menu( array('menu' => 'Menu Nos Restaurants' )); ?>
  </div>
</div>

JS：

$( '.restaurants_li, .menu_nos_restaurants' ).hover(
  function() {
    $( '.menu_la_carte' ).fadeOut(0);
    $( '.menu_nos_restaurants' ).fadeIn(0);            
  }, function() {
    $( '.menu_la_carte' ).fadeIn(0);
    $( '.menu_nos_restaurants' ).fadeOut(0);           
  }
);
$( '.sub-menu' ).click(function(event) {
  event.stopPropagation();
});

【问题讨论】：

如果我的回答对您有帮助，请将其标记为可接受的答案。谢谢

标签： jquery ipad

【解决方案1】：

你应该检查这个主题：Fix CSS hover on iPhone/iPad/iPod

在触摸设备上，任何具有悬停状态的元素都需要点击 2 次（第一次打开悬停状态，第二次类似于标准桌面点击）。

还有一个针对 CSS 或 jQuery 悬停元素的完整解决方案。看这个：iPad/iPhone hover problem causes the user to double click a link

找到另一个链接，可能会有所帮助： https://css-tricks.com/forums/topic/ipad-hover-effect/

【讨论】：

谢谢，但是如果您查看页面，您会看到我所说的 2 个轻按在悬停操作的轻按顶部 - 所以总共是 3 个轻按。所以你的回答并没有解决我的问题。换句话说，根据您所说的“在触摸设备上，任何具有悬停状态的元素都需要点击 2 次（第一次打开悬停状态，第二次就像标准桌面点击一样）”总共应该有 2 次点击，但我的上有 3 次page：一个用于悬停动作，一个什么都不做，一个实际工作和重定向。

【解决方案2】：

我认为这是由于移动浏览器的 300 毫秒延迟所致。

根据谷歌：

...移动浏览器将等待大约 300 毫秒你点击按钮来触发点击事件。这样做的原因是浏览器正在等待查看您是否真的在执行双击。

我的一个客户项目遇到了同样的问题，为此我使用了https://github.com/ftlabs/fastclick 库来消除移动浏览器上物理点击和点击事件触发之间的 300 毫秒延迟。

你也可以试试https://github.com/dave1010/jquery-fast-click

在同一个项目中，我还遇到了下拉菜单的双击问题，这也是由于 300 毫秒的延迟。

双击问题出现在 Android 浏览器/设备中，因此我检测到了用户代理并应用了自定义函数来处理该问题，这可能对您有所帮助。

<?php 
 if (user_agent() == 'android') {
    $handleClick = "onclick=\"checkClicks('$base_url/index.php')\"";
    $homePage = "#";
} else {
    $handleClick = " ";
    $homePage = "index.php";
}
?>

<!--//Script to Handle menu for mobile devices-->
<script type="text/javascript">
//handle 300ms delay click in android devices
var clicks = 0;
function checkClicks(e) {
    clicks = clicks + 1;
    if (clicks == 2) {
        window.location = e;
    } else {
        //do nothing
    }
}
</script>

如果你遇到这个问题，你也可以尝试一些可用的插件来解决这个问题。

https://github.com/dachcom-digital/jquery-doubleTapToGo

https://github.com/zenopopovici/DoubleTapToGo

【讨论】：