Prevent redirect when clicking on anchors child element

Question

I have a button that's located in an anchor, and that button has some logic that's triggerd by clicking on it.

The problem is that whenever I click on that button, the app get's redirected due the anchor parent element.

<a href="foo" id="bar">
  <span id="button">click me</span>
</a>

I tried using .stopPropagation() like it's mentioned in this post, however it doesn't work.

I tried:

$('#button').on('click', function(e) {
    e.stopPropagation();
})

Here's the fiddle.

However, if I replace the parent anchor with a div, then it works - JSFiddle

Am I doing something wrong?

Update: I know I can prevent redirecting with e.preventDefault(), however, I want when I click on the parent element to redirect, and when I click on the button not to redirect and start doing my JS functions (open modal).

@Nit yes, I seached a lot but I didn't found a solution when the parent is an `anchor` element. — Vucko, Oct 21 '15 at 14:57
What is the purpose of differentiating between clicking on the span vs clicking on the anchor tag wrapped around it? — AtheistP3ace, Oct 21 '15 at 14:59
It seems that the button click should trigger anchor `href` redirection. If you want the button to have different action then move it outside the anchor. — MaxZoom, Oct 21 '15 at 15:00

PeterKA · Accepted Answer · 2015-10-21T15:04:49.143

7

Try this:

$('#bar').on('click', function(e) {
    if( $(e.target).is('#button') ) {
        e.preventDefault();
        //your logic for the button comes here
    }
    //Everything else within the ancho will cause redirection***
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="foo" id="bar">OK
  <span id="button">click me</span>
</a>

edited Oct 21 '15 at 15:04

answered Oct 21 '15 at 14:57

PeterKA

24,158
5
26
48

1

Clicking on the text `OK` is doing a post back – Rajaprabhu Aravindasamy Oct 21 '15 at 14:58
Good! That's how it's supposed to work. The question is only concerned, if I understood it correctly, with not redirecting when the button is clicked. And I added **OK** to show that anything else in there will redirect when clicked. – PeterKA Oct 21 '15 at 15:03
@PeterKA that's is. Cheers – Vucko Oct 21 '15 at 15:23

score 3 · Answer 2 · answered Oct 21 '15 at 14:54

3

Try:

e.preventDefault();

Fiddle: http://jsfiddle.net/hfyy10a8/3/

answered Oct 21 '15 at 14:54

AtheistP3ace

9,611
12
43
43

2

stopPropagation stops events from bubbling up, in this case you still clicked on the link since it wraps the span so you need to stop the browser from doing its default action. – AtheistP3ace Oct 21 '15 at 14:57

javifm · Answer 3 · 2015-10-21T14:59:26.450

1

You should use e.preventDefault(); on links:

$('#bar').on('click', function(e) {
    e.preventDefault();
});

You can also add it on your example, all together:

$('#button').on('click', function(e) {
    e.stopPropagation();
    e.preventDefault();
});

edited Oct 21 '15 at 14:59

answered Oct 21 '15 at 14:54

javifm

705
4
9
20

score 0 · Answer 4 · edited May 23 '17 at 12:33

0

Try to use e.preventDefault() instead:

$('#button').on('click', function (e) {
    e.preventDefault();
});

See this explanation for why e.stopPropagation() is not working.

edited May 23 '17 at 12:33

Community

1
1

answered Oct 21 '15 at 14:55

Ron C

1,176
9
12

Alex · Answer 5 · 2015-10-21T15:05:33.807

0

use return false:

$('#button').on('click', function (e) {

    //some logic
    $(this).css('color', 'red');

    return false;
});

The reason why stopPropagation wont work is because it will prevent event handlers from running, not native behavior.

edited Oct 21 '15 at 15:05

answered Oct 21 '15 at 15:00

Alex

9,911
5
33
52

score 0 · Answer 6 · answered Feb 19 '22 at 09:12

I know this question already has an answer but however, I made mine work by returning false on the "onclick" attribute of the child element.

<a href="https://google.com">
    <button onclick="return doTask()">Do not navigate</button>
</a>

function doTask(){
  //... write action

  return false; <- This prevents the click action from bubbling up to parent tag
}

Prevent redirect when clicking on anchors child element

6 Answers6