触摸/点击时需要双击并单击时需要单击的锚链接

Question

我有这个：

const one = document.getElementById('one')
const two = document.getElementById('two')

one.onclick = () => console.log('one')
two.onclick = () => console.log('two')

a {
  opacity: 0;
  pointer-events: none;
  
  width: 50%;
  line-height: 100px;
  background: aliceblue;
}
div:hover a {
  opacity: 1;
  pointer-events: auto
}
div {display: flex}

<div>
  <a id="one" href="#one">One</a>
  <a id="two" href="#two">Two</a>
</div>

当有人使用鼠标/触控板时，:hover 将被触发，他们可以看到他们正在点击什么。一切都很好。

但是当有人触摸 div 内的任何位置时，:hover 将在触摸后被触发，并且即使用户不知道他们点击的是哪个链接，任一链接都会收到 onclick 事件。

有没有办法确保只有当 div 已经可见时才会触发触摸/点击？

我认为的一种方法是： 一个锚链接在被鼠标/触控板点击时像往常一样工作，但是当它被触摸/点击时，它应该只在第二次点击/触摸时起作用。第二次点击不必在 x 秒内（如双击）。第二次点击可以在第一次之后的任何时间。

Answer 1

可以用jQuery Mobile plugin 区分tap 和click。
但是...tap 与鼠标点击链接具有相同的效果。

我想我发现的东西看起来更像是一个hack，而不是一个干净的标准解决方案。诀窍是将真正的链接移开......并在第一次点击/点击时将其放回原位。所以第二次点击/点击就可以了。

不知道你喜不喜欢...
但无论如何，这是一个有趣的谜题。
;)

	$(document).ready(function(){
		// Hide the real links and create fake links
		$("#container a").each(function(i,val){
			$(this).parent().append( "<div class='fake LinkHidden' id='fake_" +$(this).attr("id")+ "'>" + $(this).html()+ "</div>" );
			$("#RealLink").append( $(this) );
		});
		
		var fromHoverFlag = false;
		// simulate hover for mouse and tap
		$(".fake").on("tap mouseenter mouseleave", function(){
			$(this).toggleClass("LinkVisible LinkHidden");
			fromHoverFlag = true;
		});
		
		// onclick the visible fake links, replace html with a cloned version of the original link
		$("#container").on("tap click",".LinkVisible",function(){
			thatID = $(this).attr("id").split("_");
			
			//console.log("that Link ID: "+thatID[1]);
			// Clone the real link only on first click/tap
			if(fromHoverFlag){
				$(this).html( $("#RealLink #"+thatID[1]).clone() );
				console.log("Cloned link "+thatID[1]);
			}
		});
		
		// Restore the fake link on real click
		$("#container").on("click", ".fake a", function(){
			$(this).parent(".fake").toggleClass("LinkVisible LinkHidden");
			$(this).parent().html( $(this).html() );
			fromHoverFlag = false;
			console.log("Removed link "+thatID[1]);
		});
	});

	a, .fake{
		text-decoration:underline;
		color:dodgerblue;
		width: 50%;
		line-height: 100px;
		background: aliceblue;
	}
	.LinkHidden {
		opacity: 0;
	}
	.LinkVisible{
		opacity:1;
	}

	div#container {display: flex}
	
	#RealLink{
		position:fixed;
		top:-1000px;
	}
	.bigDiv{
		height:1000px;
	}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a name="top"></a>
	<div id="container">
		<a id="one" href="#section_one">One</a>
		<a id="two" href="#section_two">Two</a>
	</div>
	<div id="RealLink"></div>
	
	<div class="bigDiv"></div>
	<a name="section_one"></a><br>
	ONE<br>
	<a href="#top">Back to top</a>
	<div class="bigDiv"></div>
	<a name="section_two"></a><br>
	TWO<br>
	<a href="#top">Back to top</a>
	<div class="bigDiv"></div>