【问题标题】：What happens exactly when a link is tapped点击链接时会发生什么
【发布时间】：2012-12-17 18:31:51
【问题描述】：

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

这是一个循环内的代码 sn-p，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()

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

更新

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

事件是 mouseenter
防止默认
事件是点击

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

【问题讨论】：

你试过在触摸事件上绑定明确的吗？
@BastianRang 是的，在此之前我使用了来自this jQuery plugin 的tapone 事件。我意识到后来我真的不需要它了。
您的实际问题是什么？我的猜测是 if(submenu.css("display") != "block") 由于某种原因没有命中。你试过检查吗？
您尝试过使用tap 事件吗？看看这个插件：alxgbsn.co.uk/2012/03/12/…
@RoryMcCrossan 肯定可以，因为它可以在桌面上运行。

标签： javascript jquery mobile hyperlink hover

【解决方案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);
});

【讨论】：