平板电脑首次点击鼠标悬停，点击第二次点击

Question

发布这个问题主要是为了确认我对这种行为的怀疑，并因此将其记录给其他程序员。 （因为我在网上找不到任何记录）

我有一个我正在构建的网站，其导航栏具有以下属性： 水平部分是<ul> <li>个，<li>的一些都是：{/ p>

• 一个n <a>元素带您进入该主题。

• 在子菜单上触发display:block的悬停式CSS选择器 - 嵌套的<ul>，然后垂直下拉。

在桌面上，这一切都符合我的预期：将鼠标悬停在关键元素上会显示子菜单，然后单击它会执行点击事件（在这种情况下是正常的<a>链接。

但是在iOS设备上（在Air，Mini，iPhone 6上测试），我发现点击一次会暴露子菜单，并且第二次点击（当子菜单打开时）实际上会调用控制元素上的链接。

长按将显示“链接上下文菜单”

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

目前我最好的猜测是iOS Safari有一些神奇的代码可以通过决定你是否有一个元素来添加这个（显然是可取的）behvaiour：hover CSS（或者，我想，一个onhover eventhandler bound）以及一个点击eventhandler bound然后第一次点击将调用，并保持调用，悬停事件，第二次点击将调用click事件。

问题：

1. 有人自信地知道这种行为的来源是什么。

2. 任何人都可以找到此行为的任何文档！？

3. 人们是否愿意提供其他功能/不起作用的其他平台（Android平板电脑？Windows平板电脑？较旧的iOS？）

Answer 1

1. Nicholas C. Zakas（@slicknet）在post中描述了触发可点击元素（例如仅在iOS中第二次点击时触发的锚点链接）的行为。触发双击的原因是：

  

：悬停使用隐藏或显示其他元素的规则   能见度或显示。

e.g。

null

1. Apple还提供documentation on Handling Events作为参考。

2. 没有其他平台可以做到这一点。至少从版本5开始就是iOS特定的（可能是从版本1开始）。因为它不是跨平台的，对于Android和其他触摸设备，它必须以不同的方式处理，并且需要取消点击事件等...... 使用JS。虽然我设法做到了这一点。我认为公平地说，对于CSS导航菜单栏来说，使用 链接和切换 的切换元素在触控环境中很难实现。< / p>