How to make href listen stopPropagation

Question

stopPropagation works but cannot stop href being executed on child click, is there a way to make parent anchor do not execute it's href on child element is clicked(stopPropagation/bubbling)?

Here is my markup:

<div id="parent">
  <h5>Parent</h5>
  <a id="childAnchor" href="https://www.google.com/" target="_blank">
    <h5>Child anchor tag</h5>

    <div id="grandChildAnchor">
      <h5>Grand Child div tag</h5>
    </div>
  </a>
</div>

Here is jsfiddle where I am redirecting on anchor click: https://jsfiddle.net/gchc9Ldb/

Here is stackoverflow code snippet but the redirect (target="_blank") is not happening correctly. So check the above jsfiddle link rather below code snippet.

$('#parent').click(function() {
  console.log('#parent clicked');
})

$('#parent a').click(function() {
  console.log('#parent > anchor clicked');
})

$('#parent a div').click(function(e) {
  e.stopPropagation();
  console.log('#parent > anchor > clicked');
})

h5 {
  text-align: center;
  color: white;
  margin: 0;
}

#parent {
  width: 200px;
  height: 200px;
  padding: 10px;
  background-color: green
}

a {
  display: block;
  padding: 50px 10px;
  background-color: blue
}

#grandChildAnchor {
  padding: 25px 0;
  background-color: red
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="parent">
  <h5>Parent</h5>
  <a id="childAnchor" href="https://www.google.com/" target="_blank">
    <h5>Child anchor tag</h5>
    
    <div id="grandChildAnchor">
      <h5>Grand Child div tag</h5>
    </div>
  </a>
</div>

EDIT: I don't want to run return false on my anchor tag's href, I still need href to work but not when the anchor tag's child is clicked. e.stopPropagation will not work for me. Hence, it's not a duplicate question as most assumed.

that said I don't really understand your question. What you want is not clear to me — Liam, Sep 04 '17 at 14:20
@Liam you read my **Edit**, may be it explains more to you to unmark it as a duplicate question. — Syed, Sep 04 '17 at 17:00

score 4 · Accepted Answer · answered Sep 04 '17 at 14:17

4

You need to use e.preventDefault();

$('#parent a div').click(function(e) {
  e.preventDefault();
  console.log('#parent > anchor > clicked');
})

e.stopPropagation() stops the event from bubbling up the event chain.

e.preventDefault() prevents the default action the browser makes on that event

Here is the working link to JSFIDDLE

answered Sep 04 '17 at 14:17

Ankit Agarwal

30,378
5
37
62

How will it work as OP is using e.stopPropagation() – Ankit Agarwal Sep 04 '17 at 14:21
But when you use e.stopPropagation() it works in fiddle as well – Ankit Agarwal Sep 04 '17 at 14:26
Apparently my understanding on this is just wrong. I can replicate the scenario locally from scratch (taking jQuery out of the equation just in case) and preventing the default works and stopping propagation doesn't. I was certain if you didn't let it propagate to the `a`, the default behavior wouldn't be triggered, but the evidence says otherwise. TIL I guess. – T.J. Crowder Sep 04 '17 at 14:31
@AKA `e.preventDefault()` helped, thanks. As you got to understand my question, you may agree it's not a duplicate question, I don't want to run `return false` on my anchor tag's href, it still need href to work but not when the anchor's child is clicked. Hope my question deserve up vote rather down vote :) – Syed Sep 04 '17 at 14:37
1

@Syed i understood that that is why i upvote your answer. Do not know why people are so eager to mark the question as duplicate. – Ankit Agarwal Sep 04 '17 at 14:39

How to make href listen stopPropagation

1 Answers1