<a href=...>在点击 div 中</a>

Question

当我单击<div>超链接时将不起作用。

如何修改代码让超链接工作？

编码：

<div id="theDiv" onclick="this.style.display='none';">
  ...
  <a href="http://stackoverflow.com">Go to stackoverflow</a>
  <a href="http://...">Go to ...</a>
  <a href="http://...">Go to ...</a>
</div>

Answer 1

尝试这个

<a href="http://stackoverflow.com">
<div id="theDiv" onmousedown="alert('HI');">  
  Go to stackoverflow
</div></a>

Answer 2

您将 onclick 显示设置为隐藏在 div 上。 单击时将您的 div 设置为无显示。 这就是为什么当您单击 div 时，div 会消失或隐藏并且您的超链接不起作用。 所以删除你的点击样式。

Answer 3

您可以通过添加事件处理程序并调用事件对象的stopPropagation()方法来防止点击事件冒泡到<div> ：

 var anchors = document.querySelectorAll('#theDiv a'); [].forEach.call(anchors, function(a) { a.addEventListener('click', function(e) { e.stopPropagation(); }); });

 <div id="theDiv" onclick="this.style.display='none';"> <a href="http://stackoverflow.com" target="_blank">Go to stackoverflow</a> <a href="http://..." target="_blank">Go to ...</a> <a href="http://..." target="_blank">Go to ...</a> </div>