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)!

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)!

• javascript
• html

• learn about event delegation – tereško Commented Mar 29, 2013 at 10:44

3 Answers 3

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/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>