更新

Question

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

以下是循环中的代码段，this是一个包含li（submenu）的菜单项（ul）：

$(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就会变为$("#nav > ul > li:first-child > a").click()。所以在Web控制台中输入：

e.preventDefault

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

更新

我刚刚输入了两个警告声明。一个在处理程序中首先说明事件类型，在top之前说“防止默认”。在我的移动浏览器（适用于Android的Dolphin浏览器）上，只需点按菜单项即可显示以下内容：

事件是mouseenter
防止违约
活动点击

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

Answer 1

我通过添加另一项检查来查看子菜单是否位于正确的位置，而不是使用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);
});

点击链接时会发生什么

更新

1 个答案: