I have this code:
<td onclick="Test()">
<img src="test.jpg" onclick="Test2(); return false;"><br>
Rest of the cell with some text.
</td>
When I click the image, Test() is also fired because I am also clicking the table cell. How to provent this? If I click on the image, I want test2() to fire, if I click somewhere else in the table cell, test() should be fired.
Edit: Even with return false, Test() is still fired(testing in Chrome)!
If Test2() returns false the click won't bubble to Test()
Short answer:
<img src="test.jpg" onclick="Test2(); return false;">
Long answer:
Event Order - http://www.quirksmode.org/js/events_order.html
The way I prefer is using eventListeners and event.stopPropagation() as I've read some browsers do not accept return false and it's also not a very well defined action. And like Adam said, it's worth it to read up on event propagation.
<div id="clickme"></div>
<script>
document.getElementById("clickMe").addEventListener("click", function(event) {
event.stopPropagation();
//event.preventDefault(); this is the same as return false;
});
</script>
