平板电脑首次点击悬停，点击第二次点击 [英] Tablets hover on first click, click on second click

问题描述

发布这个问题很大程度上是希望确认我的怀疑的行为，从而记录它为其他程序员。 （因为我在网上找不到这个记录）

我有一个网站，我正在建设，其导航栏有以下属性：
水平部分是< ul> of < li> s和一些 ; li> s hav both：

• A n < a&




• 悬浮CSS选择器触发 display：block code>在子菜单上 - 一个嵌套的< ul> ，然后垂直下降。




在桌面上，这一切都像我所期望的那样：悬停在键元素上暴露子菜单，点击它执行点击事件（在这种情况下是正常的<$ c $但是在iOS设备上（在Air，Mini，iPhone 6上测试），我发现一次点击一次将暴露子菜单，并且第二次（当子菜单打开时）将实际调用控制元素上的链接。

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

这正是我想要的，这是伟大的！但我不知道为什么它这样做。虽然菜单是基于Bootstrap的，但我找不到任何引导是做它。

目前我最好的猜测是iOS Safari有一些魔术代码，通过决定如果你有一个元素：hover CSS（或者我想象，一个onhover事件处理程序绑定）和一个click事件处理程序绑定，然后第一个水龙头将调用，并保持

问题：

1. 有没有人自信地知道这种行为的根源。




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




3. 人们愿意贡献其他平台，但这不适用于Android平板电脑（Windows平板电脑？旧版iOS？）

   / li>
   

解决方案

1. 触发可点击元素仅在iOS中的第二次点击触发，在此 post 由Nicholas C. Zakas（@slicknet）。什么触发双击是：

：hover使用$隐藏或显示另一个元素的规则b $ b显示或显示。

例如

 code>< style> 
 p span {
 display：none; 
} 
 
 p：hover span {
 display：inline; 
} 
< / style> 
< p>< a href =/>点按我< / a>< span>已点按！< / span>< / p& 
  

2. Apple还提供处理事件的文档以供参考。 p>




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

Posting this question largely in the hopes of confirming my suspicions of the behaviour, and thus documenting it for other programmers. (Since I found no record of this anywhere online)

I have a site that I'm building, whose nav bar has the following properties: The horizontal section is a <ul> of <li>s and some of the <li>s hav both:

• A n<a> element taking you to that topic.

• A hover CSS selector that triggers display:block on a submenu - a nested <ul> which then drops down vertically.

On a desktop this all behaves as I'd expect: hovering on the key element exposes the submenu, and clicking on it executes the click event (in this case a normal <a> link.

But on an iOS device (tested on Air, Mini, iPhone 6) I found that tapping once would expose the submenu, and tapping a second time (when the submenu is open) will actually invoke the link on the controlling element.

Long-pressing will bring up the "link context menu"

This is exactly what I wanted it to do, which is GREAT! But I don't know WHY it is doing it. Whilst the Menu is Bootstrap based, but I can't find any bootstrap that is doing it.

Currently my best guess is that iOS Safari has some magic code that adds this (obviously desirable) behvaiour by deciding that if you have an element with :hover CSS (or, I imagine, an onhover eventhandler bound) and also a click eventhandler bound then the first tap will invoke, and keep invoked, the hover event, and the second tap will invoke the click event.

Question:

1. Does anyone know, confidently, what the source of this behaviour is.

2. Can anyone find any documentation of this behaviour!?

3. Would people like to contribute other platforms on which this does/doesn't work (Android tablets? Windows tablets? older iOS?)

解决方案

1. The behavior triggering a clickable element such as an anchor link to fire only on the second tap in iOS, is described in this post by Nicholas C. Zakas (@slicknet). What triggers the double tap is a:

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

e.g.

<style>
    p span {
        display: none;
    }

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

2. Apple also provides a documentation on Handling Events for reference.

3. No other platforms do this. It's iOS specific since at least version 5 (likely since version 1). Because it's not cross-platform, for Android and other touch devices, it has to be handled differently, and requires canceling click events etc... using JS. While I have managed to do this. I think it's fair to say that for CSS navigation menu bars to work with toggle elements that are both links and toggles is very difficult to achieve in a touch-only environment.

这篇关于平板电脑首次点击悬停，点击第二次点击的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！