Stopping event propagation from an onclick handler

Question

I am working on a legacy web app which I am progressively ajaxifying and have found the need to stop event propagation from an inline onclick handler.

Take this for example:

<a id="inner" onclick="return handleOnclick();" href="#">Some link</a>

Apart from the onclick handler, there are listeners added with addEventListener. I need that under certain conditions the onclick handler can stop the propagation of the event. I've tried event.stopPropagation() but it does not seem to work. Here's a jsfiddle to test:

http://jsfiddle.net/APQk6/985/

Any ideas?

You have to pass the event object to the event handler. But the real issue is that stopPropagation does not prevent event handlers on the same element. — Felix Kling, Mar 27 '14 at 16:20
Try event.preventDefault(). http://stackoverflow.com/questions/18971284/event-preventdefault-vs-return-false-no-jquery — Robert Munn, Mar 27 '14 at 16:24
@FelixKling The event object exists (window.event), you can check in the jsfiddle. Re. "the real issue is that stopPropagation does not prevent event handlers on the same element", can you provide a reference? — Grodriguez, Mar 27 '14 at 16:26
`window.event` does not exist in Firefox. Just look at the documentation on MDN or quirksmode.org , event.stopPropagation only stops the event from bubbling up. (I'm on the phone, I cannot provide links right now). — Felix Kling, Mar 27 '14 at 16:30
@FelixKling you got me on the right track, if you post an answer based on your comments I will accept it. — Grodriguez, Mar 27 '14 at 17:05

score 2 · Accepted Answer · edited May 23 '17 at 12:11

2

Found a solution based on Felix Kling's comments:

Need to call event.stopImmediatePropagation() instead of event.stopPropagation()
Need to pass the actual event object from the inline handler (this question was also useful)

Here's a working solution:

http://jsfiddle.net/r95cC/3/

edited May 23 '17 at 12:11

Community

1
1

answered Mar 27 '14 at 17:04

Grodriguez

21,501
10
63
107

Oh, I knew that jQuery had `stopImmediatePropagation`, but didn't know it made it into the DOM spec now. Cool! Though I wonder what the browser support is. – Felix Kling Mar 27 '14 at 17:25
Good question. It is part of the DOM level 3 spec draft (http://www.w3.org/TR/DOM-Level-3-Events/#widl-Event-stopImmediatePropagation). I have tested it on Desktop Chrome, Desltop Firefox, iPad and iPhone. – Grodriguez Mar 27 '14 at 19:59
@kol your solution is useful as a fallback if stopImmediatePropagation is not supported :) – Grodriguez Mar 28 '14 at 12:40

score 1 · Answer 2 · answered Mar 27 '14 at 16:40

You can use a "cancelled" attribute. Not nice, but works. http://jsfiddle.net/koldev/45zbA/

HTML

<script>
function handleOnclick(self) {
    self.setAttribute("cancelled", confirm('Stop event?') ? "1" : "0");
    return false;
}
</script>

<div>
    <a id="inner" onclick="return handleOnclick(this);" href="#">Some link</a>
</div>

JavaScript

document.getElementById('inner').addEventListener('click', function(e){
    if (this.getAttribute("cancelled") == "1") {
        return;
    }
    alert("Listener called");
});

Thank you for the suggestion, although it looks like `stopImmediatePropagation` is what I was looking for. — Grodriguez, Mar 27 '14 at 17:05

Stopping event propagation from an onclick handler

2 Answers2