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

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

我有一个我正在构建的站点，其导航栏具有以下属性：水平部分是

的

和一些

s都有：

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

• 触发display:blockhoverCSS选择器display:block子菜单上的display:block – 嵌套的

  ，然后垂直下拉。

  在桌面上，这一切都像我期望的那样：将鼠标hover在关键元素上会显示子菜单，然后单击它会执行click事件（在这种情况下是正常的链接）。

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

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

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

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

  题：

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

  2. 任何人都可以找到这种行为的任何文件！？

  3. 人们是否愿意提供其中有/无效的其他平台（Android平板电脑？Windows平板电脑？较旧的iOS？）

  Answer 1

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

  ：hover使用可见性或显示隐藏或显示另一个元素的规则。

  例如

    
  Tap meYou tapped! 

  2. Apple还提供了有关处理事件的文档以供参考。

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