How to .stopProagation() in a function called via onClick()

Question

I have a button that includes an onClick().

<input id="btn1" type=button onClick="myFunc('arg1', 'arg2', 'arg3')">

And a function:

<script type="text/javascript">
    function myFunc(a1, a2, a3) {
        //do stuff
    }
</script>

My button is contained inside a DIV container that has it's own onClick() event.

I need the DIV onClick() to fire (as it does) but NOT when the button inside it is clicked. Then I need only the button's onClick() to fire.

I've done this before by using .bind() to bind a listener event to a button, which automatically passes the event object as a parameter to the listener function, and then using e.stopPropagation().

But, functions called via HTML onClick() do not seem to have this event passed to them.

Is there a way to invoke stopProagation() within a function that is called via HTML onClick() instead of via .bind()?

Again, the ultimate goal here is to make sure that button's onClick() fires, but it's containing DIV's onClick() does not.

Possible duplicate of [How to stop event propagation with inline onclick attribute?](http://stackoverflow.com/questions/387736/how-to-stop-event-propagation-with-inline-onclick-attribute) — Uzbekjon, Apr 26 '16 at 18:57
Possible duplicate of [How to pass event as argument to an inline event handler in JavaScript?](http://stackoverflow.com/questions/16404327/how-to-pass-event-as-argument-to-an-inline-event-handler-in-javascript) — mhodges, Apr 26 '16 at 18:58

score 3 · Accepted Answer · answered Apr 26 '16 at 18:54

Try to pass event as first argument:

function test (e) {
    e.stopPropagation();
    console.log('click button');
}

function testDiv (e) {
    console.log('click div');
}

<div onClick="testDiv()">
    <button onClick="test(event, 'a','b','c')">button</button>
</div>

score 1 · Answer 2 · answered Apr 26 '16 at 18:57

1

You can do this:

<input id="btn1" type="button" onClick="myFunc('arg1', 'arg2', 'arg3'); event.stopPropagation();">

An event object aptly called "event" is available in handlers defined by on- prefixed HTML attributes.

Source: MDN

answered Apr 26 '16 at 18:57

lampyridae

949
1
8
21

score 1 · Answer 3 · answered Apr 26 '16 at 19:00

Modify the definition of the function myFunc as::

function myFunc(ev,a1,a2,a3) {

Now you can access the methods and parameters of the event::

ev.stopPropagation();

Then, you have to pass the parameter on the onclick::

<input id="btn1" type=button onClick="myFunc(event,'arg1', 'arg2', 'arg3')">

score 1 · Answer 4 · answered Apr 26 '16 at 19:02

Wanted to add a note as a comment, but there are already 2 answer that my note relates to. So, I am adding it as an answer.

Please note:

event object is not accessible on all browsers. IE would expect it to be window.event.
stopPropagation() function is also non IE compatible. You would have to use cancelBubble = true instead.

Instead of passing event pass event || window.event to your method and call appropriate function to stop the propagation.

<input onClick="myFunc((event || window.event), 'arg1', 'arg2', 'arg3')" ...>

[stopPropagation](https://developer.mozilla.org/fr/docs/Web/API/Event/stopPropagation) is only non compatible with IE8 and earlier! Please don't bother with IE8. — lampyridae, Apr 28 '16 at 15:32

How to .stopProagation() in a function called via onClick()

4 Answers4

Please note: