平板电脑在第一次点击时悬停，在第二次点击时点击

Question

发布这个问题主要是希望证实我对该行为的怀疑，从而为其他程序员记录下来。（因为我在网上找不到任何记录）

我正在建设一个网站，其导航栏具有以下属性：水平部分是 <ul> 的 <li>s 和一些 <li>s 两者都有：

n<a> 个元素带您进入该主题。
在子菜单上触发 display:block 的悬停 CSS 选择器 - 嵌套 <ul> 然后垂直下降。

在桌面上，这一切都符合我的预期：将鼠标悬停在关键元素上会显示子菜单，然后单击它会执行单击事件（在本例中是正常的 <a> link .

但在 iOS 设备上（在 Air、Mini、iPhone 6 上测试）我发现点击一次会显示子菜单，然后点击第二次（当子菜单打开时）实际上会在控制元素上调用 link。

长按会弹出"link context menu"

这正是我想要的，太棒了！但我不知道为什么要这样做。虽然菜单是 Bootstrap 的，但我找不到任何正在执行此操作的 bootstrap。

目前我最好的猜测是 iOS Safari 有一些神奇的代码来添加这个（显然是可取的）行为通过决定如果你有一个带有 :hover CSS 的元素（或者，我想，一个悬停事件处理程序绑定）和一个点击事件处理程序绑定，然后第一次点击将调用并保持调用悬停事件，第二次点击将调用点击事件。

问题：

有没有人自信地知道这种行为的根源是什么。
谁能找到任何关于这种行为的文档！？
人们愿意贡献其他 does/doesn 不起作用的平台吗（Android 平板电脑？Windows 平板电脑？更旧的 iOS？ )

Answer 1

Nicholas C. Zakas post 描述了触发可点击元素（例如锚点 link 仅在 iOS 中的第二次点击时触发的行为（@光滑网）。触发双击的是：

:hover Rule that either hides or shows another element using visibility or display.

例如

<style>
    p span {
        display: none;
    }

    p:hover span {
        display: inline;
    }
</style>
<p><a href="/">Tap me</a><span>You tapped!</span></p>

苹果也提供了一个documentation on Handling Events供参考
没有其他平台这样做。它至少从第 5 版开始（可能从第 1 版开始）是 iOS 特定的。因为不是跨平台的，对于Android和其他触摸设备，要区别对待，需要取消点击事件等...使用JS。虽然我设法做到了这一点。我认为可以公平地说 CSS 导航菜单栏与切换元素一起使用 both links 和 toggles在纯触摸环境下很难实现。

平板电脑在第一次点击时悬停，在第二次点击时点击

Tablets hover on first click, click on second click

css

click

hover

tablet

ios