<a href=...> in a onclick div

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

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

Answer 3

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

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>