触摸/点击时需要双击的锚点链接，单击时单击一次

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

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

我认为我找到的东西看起来更像是一个 hack ，而不是一个干净的标准解决方案。诀窍是移动真正的链接......并在第一次点击/点击时将其恢复原位。所以第二次点击/点击就可以了。

我不知道你是否会喜欢它... 但无论如何，这是一个有趣的谜题 ;）

＆＃13;

＆＃13;

	$(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]);
		});
	});

＆＃13;

	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;
	}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;