为什么这段双击事件JS代码无法生效？单击无响应双击需触发链接跳转

嘿，我来帮你捋捋为啥当前代码达不到预期效果～

核心问题1：双击事件里的目标错误 #

你在双击事件中写了this.parentElement.click()，但这里的this指代的就是<a class="flink">这个链接元素本身，它的父元素并不是这个跳转链接，所以点击父元素完全不会触发链接的跳转行为——相当于你点了链接外面的区域，自然没反应。

核心问题2：双击与单击的事件触发顺序（次要但值得注意） #

浏览器的事件触发逻辑是：双击动作会先触发两次click事件，之后才会触发dblclick事件。不过这不是导致当前失效的主要原因，但你要知道，当你双击时，前两次click的preventDefault()已经执行了，不过这不影响我们修复后的逻辑。

修复后的代码 #

只需要把双击事件里的代码改成直接跳转到链接的目标地址就行，最简单的方式是读取<a>的href属性，用window.location.href实现跳转：

HTML（保持不变）

<a class="flink" href="menushka.html"> 
  <div class="winimg"><img class="winyar" src="./img/tools.png"></div> 
  <div class="wintxt">work</div> 
</a>

修正后的JS

var link = document.getElementsByClassName('flink')[0]; 
link.addEventListener('click', function(event) { 
  // 单击时阻止默认跳转行为
  event.preventDefault(); 
}); 
link.addEventListener('dblclick', function(event) { 
  // 双击时直接跳转到链接的目标地址
  window.location.href = this.href; 
});

另外，我把变量名从img改成了link，这样更贴合元素的实际类型，可读性更好～

内容的提问来源于stack exchange，提问作者mex111