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

Question

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

我有我建立一个网站,其导航栏具有以下特性:水平部分是<ul>的<li>S和一些的<li>小号甲肝两个:

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

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

在桌面上,这一切都符合我的预期:将鼠标悬停在关键元素上会显示子菜单,然后单击它会执行click事件(在这种情况下是普通<a>链接).

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

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

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

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

题:

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

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

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

Answer 1

1. 触发可点击的元件,例如一个锚链接仅在IOS第二抽头火的行为,在此描述后由Nicholas C. Zakas(@slicknet).触发双击的原因是:

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

例如

<style>
    p span {
        display: none;
    }

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

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

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