Attempts at making a double click possible in CSS

FAIL: Events prevented until focused

<a class="test1" href="http://google.com" tabindex="-1">Double click me</a>

Notes: also tested with wrapping span preventing clicks on itself until in focus. Likely fails because the pointer-events prevents click-to-focus

FAIL: Em covers link, hidden when in focus

<span class="test2">
	  <a href="http://google.com">Double click me</a>
	  <em tabindex="-1">&nbsp;</em>
	</span>

Notes: Works in Firefox, not in WebKit. Also tested burying the em with z-index beneath the link when focused, same result

PASS: Input covers link, buries on focus, which triggers hover on link keeping it on top

<div class="test3">
	  <span><input type="text" value="&nbsp;" readonly="true" />
	  <a href="http://google.com">Double click me</a></span>
	</div>

Notes: Work on WebKit (including mobile) and Firefox! Need to make sure input completely covers the link so a hover isn't triggered prematurely. DOESN'T require HTML5 or CSS3.

FAIL :target, swaps z-index to real link

<span class="test4">
	  <a id="real-link" href="http://google.com">Double click Me</a>
	  <a href="#real-link" class="fake-link">Double click Me</a>
	</span>

Notes: Works, but can scroll the page. Works best with non-transparent backgrounds on links. Requires CSS3.

PASS :active on covering span, link surfaces

<span class="dblclick-wrap">
	  <a class="dblclick" href="http://google.com">Double click me</a>
	  <span></span>
	 </span>

Notes: Requires no HTML5 or CSS3. Fails on Mobile Safari unless block-level links. Most semantic (still not great...). Opera & IE require color set on top covering span.