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?

Cottontail

return false should do the trick. It should work if you do: <a href="".... onclick="some action; return false;"> . 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 returning false is the best solution ins this case. The question is, why do you use inline event handlers at all? – Currency

return false not cancel event that bind by .live – Cottontail

return false within a jQuery function is not the same as outside of it: #1357618 – Bigod

@Mrchief: I see thanks.... I always thought it was.... – Currency

Answer 1

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.

Bigod

I can't change code that bind by .live. There are no way to fix this? – Cottontail

But it is possible to stop the event from another event handler that is bound to the element. – Currency

Only if that event handler is registered first. jQuery will queue them up, right? – Bigod

@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. – Currency

@Abonec: See my updated answers and fiddle. Hopefully you can use one of them. – Bigod

Thx, it works for ff and chrome. I haven't posibility to test it in IE today, but thanx. – Cottontail

Hah... It's work fine in Chromium and IE but not working in firefox. Firefox can't find event object. – Cottontail

Oh tnx. It's work perfectly in my browsers(ff,ie8,chrome and opera). Thx you! – Cottontail

with·out /wəˈT͟Hao͝ot,wəˈTHout/ preposition 1. in the absence of. – Geraldina

Answer 2

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.

Currency

When I trying get any information about event (onclick"alert(window.event)") it show me alert "undefined" when i click. – Cottontail

@Abonec: window.event is only available in IE (and Chrome). In other browsers, the event object is passed to the event handler as parameter. – Currency

but i don't use function and cant give paramenetr (e). – Cottontail

@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)". – Currency

Thx you. I newbie in js and some js structures is difficult for me, your last comment is very useful for me. – Cottontail

@Abonec: In general I can recommend to read the MDN JavaScript Guide and regarding event handling, have a look at the quirksmode.org articles. If you read trough both, you have a very good basis. – Currency