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?
Share Improve this question asked Feb 12, 2015 at 12:24 Willy LazuardiWilly Lazuardi 1,8164 gold badges26 silver badges41 bronze badges 1- @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
Reset to default 7You 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>