Link inside clickable div

Question

I have a link inside a clickable div like this:

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

How do I prevent a click from triggering both on the div and on the link?

I want to keep the tag of the link <a href for search engines and the referencing.

Possible duplicate of [How do you make an anchor link non-clickable or disabled?](https://stackoverflow.com/questions/7654900/how-do-you-make-an-anchor-link-non-clickable-or-disabled) — Cookie, Jul 07 '17 at 15:08

score 1 · Accepted Answer · answered Jul 07 '17 at 15:12

Is there more content going into the div besides the anchor tag, or could you do something like this and avoid the click event altogether?

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

score 0 · Answer 2 · answered Jul 07 '17 at 15:13

May not be best answer but if I were to do a similar task I would simply comment out the href inside the div, crawlers should still read it like its a link but it wouldn't be clickable technically.

It also seems that you may be over complicating it from my point of view. Why not just specify each link for the div instead of having a script make it? It would simplify the code and remove your problem.

score 0 · Answer 3 · edited Apr 22 '18 at 18:38

0

You could make the function return false to disable anchor href forwarding

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

edited Apr 22 '18 at 18:38

Bryan Ash

4,385
3
41
57

answered Jul 07 '17 at 15:29

Calvin

149
4

Link inside clickable div

3 Answers3