Question

So currently I have a image inside a div in such a way:

<div onclick="doSomething()">

   <img onclick="doSomethingElse()" src="image.png"/>

</div>

But clicking on the image calls both doSomething() and doSomethingElse(). I’d only like it to doSomethingElse().

I “need” to have the containing div “doSomething()” so getting rid of that is not an option.

Any ideas?

Answer 1

Inside of doSomethingElse(), call event.stopPropagation().

var doSomethingElse = function(event) {
   event.stopPropagation();
   // ...
}