Question

我在可点击的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的标记。

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

Answer 2

可能不是最好的答案，但如果我要做类似的任务，我会简单地将div中的href注释掉，爬虫应该仍然像它的链接一样读它，但技术上不会点击。

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

Answer 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;
}

可点击的div

3 个答案: