1

我正在建立一个网站，其中导航菜单中的某些元素有一个子菜单。当鼠标悬停在元素上时会显示这些子菜单，但是在移动设备上我当然不能这样做，因为没有实际的悬停。点击意味着点击，点击链接。我希望有一个简单的解决方案，但它不适用于我的移动设备......

这是一个循环内的代码片段，是一个包含( )this的菜单项 ( )：lisubmenuul

$(this).find("a").on("mouseenter focusin click", function(e) {
    if(submenu.css("display") != "block") {
        e.preventDefault(); //should work on mobile
    }
    submenu.stop().css('display', 'block').animate({
        top: 1.2em,
        opacity: 1
    }, 200);
});

现在我在 Firefox 中进行测试。在正常使用中，您不能在子菜单出现之前实际单击菜单项，因为一旦鼠标悬停在它上面就会display变为。block因此，在 Web 控制台中，我输入：

$("#nav > ul > li:first-child > a").click()

这给出了预期的行为。子菜单出来，但链接没有被关注。在移动设备上，该链接仍然被关注...什么给出了？

更新

我刚刚输入了两个警报语句。一个在处理程序中说事件类型的第一件事，一个在之前说“防止默认” e.preventDefault。在我的移动浏览器（Android 的 Dolphin 浏览器）上，点击菜单项会显示以下内容：

  1. 事件是 mouseenter
  2. 防止违约
  3. 事件是点击

自然，当触发的第一个事件是“mouseenter”时，默认不会阻止单击，因为这是菜单显示的点。换句话说，我需要确保第一个 mouseenter 确实显示了菜单，但没有触发单击...我可以检查topcss 属性，但我想知道是否还有其他方法。

4

1 回答 1

0

我通过添加另一个检查来查看子菜单是否在正确的位置，而不是使用display.

$(this).find("a").on("mouseenter focusin click", function(e) {
    if(e.type == "click" && submenu.css("top") != "1.2em") {
        e.preventDefault();
    }
    submenu.stop().css('display', 'block').animate({
        top: 1.2em,
        opacity: 1
    }, 200);
});
于 2013-01-03T12:25:41.143 回答