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上的onclick显示。在点击时设置你的div的diplay。这就是为什么当你点击div时div会消失或隐藏，你的超链接无法正常工作。所以删除你的onclick风格。

Answer 3

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

3 个答案: