Child click event affecting parent event

Question

I have a HTML structure like this:

<table>
    <tr onclick="alert ('parent event')">
        <td>
             <input type="button" name="click me" value="I'm a button" id="click me" />
        </td>
    </tr>
</table>

Now I have a click event bound on the tr, now if I click on the button, that click event on the tr is also triggered.

How can I stop that from happening?

@warl0ck is any event attached in javascript? not the inline one — Deepak Ingole, Jul 18 '14 at 02:57
Just use `.event.stopPropogation()` to prevent the event from bubbling upwards, as @Pilot mentioned. — royhowie, Jul 18 '14 at 02:57
@Pilot The real code is more complicated. So I made a minimal case here — daisy, Jul 18 '14 at 02:58

score 2 · Answer 1 · answered Jul 18 '14 at 03:01

Change your input ID to click-me (without spaces), then put this between script tags:

window.onload = function() {
    document.getElementById('click-me').onclick = function(e) {
        e.stopPropagation();
        return false;
    }
}

or you can simply put this code in the onclick attribute:

<input type="button" onclick="event.stopPropagation();" ...

http://jsfiddle.net/qwk38/

score 1 · Answer 2 · answered Jul 18 '14 at 03:02

you can solve like below;

html:

<table>
    <tr onclick="trAlert()" bgcolor="#cccccc" width="300" height="300">
        <td>
             <input type="button" onclick="btnAlert()" name="click me" value="I'm a button" id="click me" />
        </td>
    </tr>
</table>

js

function trAlert()
{
    alert('tr');
}

function btnAlert()
{
    event.stopPropagation();
    alert('btn');   
}

see the demo here --->http://jsfiddle.net/Junkie/kZ6J6/

score 0 · Answer 3 · edited May 23 '17 at 12:27

0

In bubbling the event is first captured and handled by the inner most element and then propagated to outer elements.

You should stop event from getting bubbled,

<table>
    <tr onclick="alert('parent click')">
        <td>
            <input onclick="event.stopPropagation();" type="button" name="click me" value="I'm a button" id="click me" />
        </td>
    </tr>
</table>

Fiddle

edited May 23 '17 at 12:27

Community

1
1

answered Jul 18 '14 at 03:03

Deepak Ingole

14,912
10
47
79

score -1 · Answer 4 · answered Jul 18 '14 at 02:59

-1

Add an onclick handler too to the input, on which the callback contains event.stopPropagation()

function(event) {
  event.stopPropagation();
}

answered Jul 18 '14 at 02:59

Faris Nasution

3,450
5
24
29

Child click event affecting parent event

4 Answers4