可点击 div 内的链接答案

【问题标题】：Link inside clickable div可点击 div 内的链接
【发布时间】：2017-07-07 15:05:18
【问题描述】：

我在可点击的 div 中有一个链接，如下所示：

HTML：

<div onClick="goToCat(2);" class="author-topics-block ">
    <a href="http://mywebsite/page/?cat=2">The woman in steel</a>
</div>

CSS：

.author-topics-block {
    cursor: pointer;
    text-align: center;
    line-height:26px;
    padding: 0 10px 0 10px;
    font-size: 15px;
    font-family: Oswald;
    border-bottom: 4px solid transparent;
}

JS：

function goToCat(catId) {
  window.location.href = "http://mywebsite/page/?cat=" + catId;
}

如何防止在 div 和链接上触发点击？

我想保留链接的标签<a href 供搜索引擎和引用使用。

【问题讨论】：

How do you make an anchor link non-clickable or disabled?的可能重复

标签： javascript html hyperlink

【解决方案1】：

除了锚标记之外，还有更多内容进入 div，还是您可以这样做并完全避免点击事件？

.author-topics-block {
    cursor: pointer;
    text-align: center;
    line-height:26px;
    padding: 0 10px 0 10px;
    font-size: 15px;
    font-family: Oswald;
    border-bottom: 4px solid transparent;
}

<a href="http://mywebsite/page/?cat=2">
  <div class="author-topics-block ">
      The woman in steel
  </div>
</a>

【讨论】：

【解决方案2】：

可能不是最佳答案，但如果我要做类似的任务，我会简单地注释掉 div 内的 href，爬虫仍应将其视为链接，但从技术上讲，它不可点击。

从我的角度来看，您似乎也过于复杂了。为什么不直接为 div 指定每个链接，而不是让脚本制作呢？它将简化代码并消除您的问题。

【讨论】：

【解决方案3】：

您可以使函数返回 false 以禁用锚点 href 转发

<div onClick=" return goToCat(2);" class="author-topics-block ">
  <a href="http://mywebsite/page/?cat=2">The woman in steel</a>
</div>

function goToCat(catId) {
  window.location.href = "http://mywebsite/page/?cat=" + catId;
  return false;
}

【讨论】：