I have checkbox inside HTML table and I set onclick event on the HTML table row.

When I click the table row, it will fire a function on my script

<table>
    <tr onclick="sayHello('Hello World');">
         <td><input type="checkbox" /></td>
         <td>Column 1</td>
         <td>Column 2</td>
         <td>Column 3</td>
    </tr>
</table>

The problem is when I click a checkbox inside that row, it also will fire the row's onclick event

How to prevent that?

I have checkbox inside HTML table and I set onclick event on the HTML table row.

When I click the table row, it will fire a function on my script

<table>
    <tr onclick="sayHello('Hello World');">
         <td><input type="checkbox" /></td>
         <td>Column 1</td>
         <td>Column 2</td>
         <td>Column 3</td>
    </tr>
</table>

The problem is when I click a checkbox inside that row, it also will fire the row's onclick event

How to prevent that?

• javascript
• html

• @Vohuman, yes I know about that. Technically, I can move the onclick event to the <td> tag, but I think it's redudant if I set the event on each <td>. So I wanna see whether there's another options or not :) – Willy Lazuardi Commented Feb 12, 2015 at 12:47

6 Answers 6

You can simply add onclick event of checkbox to call event.stopPropagation()

<input type="checkbox" onclick="event.stopPropagation();" />

Ref: https://developer.mozilla/en-US/docs/Web/API/event.stopPropagation

Good to read one is http://javascript.info/tutorial/bubbling-and-capturing

var checkboxes = document.querySelectorAll("tr input");

for (var i = 0, l = checkboxes.length; i < l; i++) {
    checkboxes[i].onclick = function(e) {
        e.stopPropagation();
    }
}

<table>
    <tr onclick="alert('Hello World');">
         <td><input type="checkbox" /></td>
         <td>Column 1</td>
         <td>Column 2</td>
         <td>Column 3</td>
    </tr>
</table>

Stop the event from propagating to the table:

var checkboxes = document.querySelectorAll("tr input");

for (var i = 0, l = checkboxes.length; i < l; i++) {
    checkboxes[i].onclick = function(e) {
        e.stopPropagation();
    }
}

You can try like this:

http://jsfiddle/5jnfzy7o/

var c=document.getElementById('something')
c.addEventListener('click', function(){
event.stopPropagation(); //Stops event from bubbling up the DOM Tree
});
function sayHello(str){
  alert(str);
}

For HTML :

<table>
<tr onclick="sayHello('Hello World');">
     <td><input type="checkbox" id="something"/></td>
     <td>Column 1</td>
     <td>Column 2</td>
     <td>Column 3</td>
</tr>
</table>

You just faced with event bubbling :)

You have to stop the propagation using stopPropagation event's method. See an example here.

You need to stop the propagation of the click event.

document.querySelector('input').addEventListener('click', function(evt) {
  evt.stopPropagation()
})

You can start from the MDN documentation about stopPropagation and read on event flow to understand more about this.

sayHello = function(whatToSay)
{
	  alert(whatToSay);
}

<table>
    <tr onclick="sayHello('Hello World');">
         <td><input type="checkbox" onclick="event.stopPropagation();" /></td>
         <td>Column 1</td>
         <td>Column 2</td>
         <td>Column 3</td>
    </tr>
</table>