does e.stopPropagation() in jquery works on anchor tag

Question

i want prevent eventpropogation from element inside an anchor tag i m trying to use e.stopPropagation(); it doesn't seem to work is it possible or i m just wasting time please help me out of here javascript is:

$(document).ready(function(){
    $('.alink .p').click(function(e){
    alert("hi");
    e.stopPropagation();  
});

html is :

<div>
    <a href="http://google.com" class="alink" >Google links
          <p class="p">Another Links to prevent default</p>
    </a>
</div>

thanks for your precious time

It's `document`, not `"document"`, you have syntax error (missing `});`), and if you want to prevent link from taking you to a page use `e.preventDefault()` — Esailija, Jan 21 '12 at 10:15

score 26 · Accepted Answer · edited Nov 07 '14 at 10:25

26

event.stopPropagation() stops passing the event to handlers further away in DOM structure from the element, on which originally event was triggered. It does not, although, prevent action that has already been triggered.

You should use event.preventDefault() to stop mentioned above default action.

Sources:

edited Nov 07 '14 at 10:25

bud-e

1,511
1
20
31

answered Jan 21 '12 at 10:17

Krzysztof Bujniewicz

2,407
21
16

Ran across the same problem when working on something for an answer to another question. This kind of makes sense, but only if the "follow link" action is triggered *before* the event reaches the ``. If you call `.stopPropagation()` on a child element of the `` then I'd expect that action to never be triggered, because the `click` event should never be reaching the anchor. – Anthony Grist Oct 03 '13 at 13:44
@AnthonyGrist, did you ever find a solution to this? Trying to work out the exact same thing as you. – bitten Jan 16 '15 at 09:18

dknaack · Answer 2 · 2012-01-21T10:25:40.413

Description

It will not stop any default behaviours (such as link clicks) and you might want to consider using event.preventDefault() in addition to this method.

event.stopPropagation() is only for event handlers, not default behavior.

event.preventDefault() If this method is called, the default action of the event will not be triggered.

You had some spelling errors in your script and its document not "document".

Check out the Sample and this jsFiddle Demonstration

Sample

$(document).ready(function(){
    $('.alink, .alink > .p').click(function(e){
        e.preventDefault();
        e.stopPropagation();
        alert("hi");
    });
});

More Information

Generally it is not a good idea to `return false;` when you only want to prevent the default action; it will interfere with other event handlers. Also, you can only use it on the end of the function, so if there is any javascript error, the browser will still follow the link, which might be unwanted. As Esailija said, `e.preventDefault()` is the better solution. — Tgr, Jan 21 '12 at 10:20

score 0 · Answer 3 · answered Jan 21 '12 at 10:17

0

try this

$(document).ready(function(){
    $('.alink .p').click(function(e){
        e.preventDefault();
        e.stopImmediatePropagation();
        alert("hi");
        return false;
    });
});

answered Jan 21 '12 at 10:17

Dau

8,578
4
23
48

score 0 · Answer 4 · answered Jan 21 '12 at 10:20

0

you should use- e.preventDefault() to stop default behavior. stopPropagation is used to stop event bubbling.

answered Jan 21 '12 at 10:20

Vivek

10,978
14
48
66

score 0 · Answer 5 · answered Jan 21 '12 at 10:22

0

You've missed enclosing brackets here, didn't you?

$('document').ready(function(){
    $('.alink .p').click(function(e){
    alert("hi");
    e.stopPropagation();  
});

Fix brackets and then use e.preventDefault() instead.

answered Jan 21 '12 at 10:22

gregolsen

925
9
12

does e.stopPropagation() in jquery works on anchor tag

5 Answers5

Description

Check out the Sample and this jsFiddle Demonstration

Sample

More Information

Linked

Related