stopPropagation without jQuery

Question

I bind to a link (by using the .live() function of jQuery) click event and then manually add an onclick event handler with pure JS and HTML (like <a href="".... onclick="some action">). I want to prevent bubbling of the event to the live method but I don't know how.

Maybe e.stopPropagation() is helpful in this situation but the event handler added with onclick is written in pure JS and I can't call stopPropagation() from outside the jQuery element wrapper. return false in this situation does not work. I tried to substitute return false with $.Event('click').stopPropagation() but I think this is wrong as it did not work.

How to prevent bubling to live() method without jQuery wrapper?

`return false` should do the trick. It should work if you do: `` . Btw. `event.stopPropagation()` is not a jQuery method. The problem is that IE uses a different event modle that does not offer this method, so `return`ing `false` is the best solution ins this case. The question is, why do you use inline event handlers at all? — Felix Kling, Aug 17 '11 at 16:00
return false within a jQuery function is not the same as outside of it: http://stackoverflow.com/questions/1357118/javascript-event-preventdefault-vs-return-false — Mrchief, Aug 17 '11 at 16:10

score 15 · Answer 1 · edited May 23 '17 at 10:29

15

I was under the assumption that return false in "normal" event handlers prevents the event from bubbling as well, but I was wrong (thanks @Mrchief).

There are other ways to stop it though, as described on quirksmode.org:

function doSomething(e)
{
    if (!e) var e = window.event;
    e.cancelBubble = true;
    if (e.stopPropagation) e.stopPropagation();
}

cancelBubble is for IE, stopPropagation works in all W3C compatible browsers.

edited May 23 '17 at 10:29

Community

1
1

answered Aug 17 '11 at 16:14

Felix Kling

795,719
175
1,089
1,143

When I trying get any information about event (onclick"alert(window.event)") it show me alert "undefined" when i click. – abonec Aug 17 '11 at 16:27
1

@Abonec: `window.event` is only available in IE (and Chrome). In other browsers, the event object is passed to the event handler as parameter. – Felix Kling Aug 17 '11 at 16:29
but i don't use function and cant give paramenetr (e). – abonec Aug 17 '11 at 16:35
2

@Abonec: If you have an inline event handler, then the event object is available via the variable `event` or via `window.event`. E.g. `onclick="event = event || window.event; event.cancelBubble = true; //etc...."`. Or you defined a function and call `onclick="something(event||window.event)"`. – Felix Kling Aug 17 '11 at 17:07
Thx you. I newbie in js and some js structures is difficult for me, your last comment is very useful for me. – abonec Aug 17 '11 at 20:09
1

@Abonec: In general I can recommend to read the [MDN JavaScript Guide](https://developer.mozilla.org/en/JavaScript/Guide) and regarding event handling, have a look at the [quirksmode.org articles](http://www.quirksmode.org/js/introevents.html). If you read trough both, you have a very good basis. – Felix Kling Aug 17 '11 at 20:44

score 2 · Accepted Answer · edited Nov 07 '14 at 10:34

2

With .live, you cannot stop propagation. This is because with .live, the event handler is bound to the root of the DOM tree. Hence the event must bubble upto the highest element before your handler can be called. Its one of the caveats on using .live.

Consider using .delegate (if you want the handler to persist) or use .bind instead.

If you want the live handler to be disabled completly, use die:

$("#myHref").die("click", aClick); // this will remove any existing event handlers
$("#myHref").click(yourhandler);   // add your handler

Demo 1: JsFiddle 1

Or, add an inline handler (and cancel the event from there):

<a href=".." onclick="yourhandler">

Demo 2: JsFiddle 2

Inline handlers will be called first always before any jquery event handlers.

edited Nov 07 '14 at 10:34

baao

71,625
17
143
203

answered Aug 17 '11 at 15:59

Mrchief

75,126
20
142
189

I can't change code that bind by .live. There are no way to fix this? – abonec Aug 17 '11 at 16:01
But it is possible to stop the event from another event handler that is bound to the element. – Felix Kling Aug 17 '11 at 16:02
Only if that event handler is registered first. jQuery will queue them up, right? – Mrchief Aug 17 '11 at 16:03
@Mrchief: As you said yourself, `live` binds the event handler to the root. Every event handler bound *directly to the element* can stop the event from bubbling up to the root. – Felix Kling Aug 17 '11 at 16:04
1

@Abonec: See my updated answers and fiddle. Hopefully you can use one of them. – Mrchief Aug 17 '11 at 16:22
Thx, it works for ff and chrome. I haven't posibility to test it in IE today, but thanx. – abonec Aug 17 '11 at 16:48
Hah... It's work fine in Chromium and IE but not working in firefox. Firefox can't find event object. – abonec Aug 17 '11 at 19:03
Oh tnx. It's work perfectly in my browsers(ff,ie8,chrome and opera). Thx you! – abonec Aug 17 '11 at 20:07
**with·out** /wəˈT͟Hao͝ot,wəˈTHout/ *preposition* 1. in the absence of. – omikes Apr 13 '18 at 21:54

stopPropagation without jQuery

2 Answers2

Linked