javascript - 点击链接时会发生什么

Question

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

这是循环内的代码片段，this 是一个菜单项 (li)，其中包含一个子菜单 (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()

这给出了预期的行为。子菜单出现，但链接未被点击。在移动设备上，仍会跟踪该链接...什么给出了？

更新

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

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

当然，当触发的第一个事件是“mouseenter”时，默认情况下不会阻止单击，因为这是菜单显示的点。换句话说，我需要确保第一个 mouseenter 确实显示菜单，但不会触发单击...我可以检查 top 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);
});