随着触摸设备的迅速普及，全世界的网页设计师们正在失去我们心爱的鼠标指针。 关于我们如何在 CSS 中基本失去 :hover 伪类以及 JavaScript 中的 mouseenter、mouseleave 和 mousemove，有一些 有趣的话题。 然后就在本周早些时候，我发布了一篇关于如何 使用 tabindex 属性来基本上响应纯 CSS 的点击 的文章。 这让我开始思考，我们是否可以用纯 CSS 来实现双击？ 这绝不意味着要取代悬停事件，而可能是一种替代方案，使操作序列变为：点按 → 更改状态/激活链接 → 再次点按以访问链接。
乱七八糟！
这些新式的触摸设备都支持 JavaScript！ 您只需使用 JavaScript 来创建双击事件！ 乱七八糟！
是的，您可以。 对于任何有兴趣的人，“dblclick” 是一个本机的 JavaScript 事件。 例如，如果您想强制链接进行双击而不是单击，则可以将一个简单的 { return false; } 函数绑定到单击事件。 然后将一个函数绑定到 dblclick，该函数会将 window.location 更改为链接的 href 属性。
本文并非讨论此问题，而是关于 **硬核 CSS 技术**，看看我们是否可以在不使用 JavaScript 的情况下实现它。
结果
我真的很想把它归结为一种技术，并宣称它是实现 CSS 双击的最佳方式。 但事实证明，存在太多问题和考量因素，无法做到这一点。 相反，我制作了一个页面，展示了所有尝试过的最有趣技术。
大多数技术都涉及某种覆盖元素，该元素在第一次点击时被隐藏、移出页面或被埋藏。 第一次点击可以是 :active 或 :focus 的形式。 :active 很好，因为它不需要 HTML5。 :focus 需要，因为它需要元素具有 tabindex 或 contenteditable 属性才能获得焦点。 解决这个问题的一种方法是使用输入元素进行覆盖，但它也有自己的怪癖。
总而言之，用这个想法探索一番真是很有趣。 可能还有几十种想法，但对于这种最终微不足道的事情，我不得不及时止损，并宣告结束。
鸣谢
我和其他人可能尝试过超过 20 种不同的方法。 特别感谢 Darcy Bross 和 Forrst 上的这条评论 为首个可用的示例提供了线索，并感谢 Mattias Buelens 和 Topher Wilson 参与其中并开发了各种变体。
更多
如果您想尝试一下这个想法，我建议您在 JSBin 上玩玩，并保存您最好的示例。 如果你找到一些很棒的示例，我会在这里链接起来。 以下是玩这个过程中出现的一些有趣的示例
哪些元素接受 dblclick 事件？
它是否仅限于“input”和“a”元素？
我看到了两个问题
1.) 它不是双击。 它是“两次点击”。 如果我单击一次，我可以随时回来进行第二次点击。 如果你小心处理其余的 CSS，人们会注意到“悬停”状态，并意识到它可以被点击。 但是，否则，我认为这种不一致会导致混乱。
2.) 同样，如果移动用户（或者更确切地说，是鼠标用户）需要花一些时间来适应正在发生的事情。“为什么我的鼠标不起作用？”会导致“这个网站到底怎么了？”，然后才会意识到：“哦，双击”。 但是我不确定他们在这个时候是否会以最佳的心情进行网页功能发现。 无论如何，双击不像以前那么直观了。 更多应用程序和操作系统是单击的。
不要花太多时间考虑用户行为。 我真的不建议使用它。 重申一遍，重点只是弄清楚是否可以做到。
大多数技术实际上是单击然后稍后再单击，而不是真正的双击。 最接近的是利用 :active 的技术，您单击以激活链接，但如果将鼠标移开，它会“失效”。
笑死我了 :D
我不太明白 :hover 在移动设备上的链接/按钮元素有什么意义。 使用标准屏幕，有明显的指示光标位置很好，因为它是一个与人分离的设备。 但是当我使用手指的时候，它就不是什么大问题。
前几天当我拿起我的新手机时，我在想这个问题。
我理解这篇文章是一种“思考型”文章，只是想表达一下我的意见。
其次，我认为我们（设计师/开发人员）需要关注经常被忽视的 :active 状态。 由于我们使用 10Mbps 以上的连接，很容易忽略它，但 3G 可能需要几秒钟。 让用户知道他们按下了某个按钮很重要。
你应该敦促手机制造商使用能够检测手指靠近但不实际按压显示屏的屏幕。
电容式屏幕具有此功能，只是尚未完美。
那将非常酷。
乱七八糟……你不能那样做……乱七八糟……我抗议……乱七八糟！
这是触摸界面中的一个有趣问题。 我们最近一直在这里讨论这个问题，特别是在处理下拉导航时，其中激活标签也是链接。 点击标签会打开下拉菜单，但随后会打开标签链接的页面。
添加双击功能似乎是触摸设备上的一个不错的解决方案。
看到您的实验也很酷。 通过查看您如何得到最终结果，您可以学到很多东西。
我有点不明白你想说什么，我认为这不是真正的双击。
这没用，我们来给用户增加更多工作吧……
可能有用。 我会看看是否可以在我的网站上使用它。
感谢您的文章。
Mazy
很有趣，但没用，我认为。
嘿……这确实很有趣，我喜欢聚焦时的隐藏输入。 但是，我真的看不到它的用途。 不过很酷！
我认为 Chris 想要做的是扩展感知和可能性。 谁知道呢？ 也许这项练习在您的另一个项目中激发了灵感，从而解决了您无法解决的 bug。
感谢您对独特 CSS 技术的这项研究。 ;)
我想知道当互联网 V2 到来时会发生什么。不再有图片了吗？
我认为这是 CSS 技巧 :)
这在 Webkit 中不起作用，因为双击会导致放大/缩小。 而且不只是在 Android 上
让我困惑