CODEWITHSUNDEEP
javascripthtml
Antoine Cloutier
Antoine Cloutier

Reputation: 1330

Clickable image inside a clickable div calls both onclick handlers

here is my issue:

I have an img with an onclick handler inside a div that also has an onclick handler.

<div onclick="someFunction();">
  <img src="/Images/SomeImage.png" onclick="someOtherFunction();" />
</div>

When clicking on the image, I don't want the div's handler to be fired.

I have tried adding "return false;" at the end of my img's onclick, to no avail.

enter image description here

The reason I need it done that way is because I have a bunch of projects, hovering the div highlights that entry and if you click on it that'll show you more details, but you might also want to edit/delete that entry.

Thanks !!

Upvotes: 0

Views: 1421

Answers (1)

Suman Bogati
Suman Bogati

Reputation: 6349

Use the stopImmediatePropagation() method to stop the immidiate propagation.

HTML

  <img src="/Images/SomeImage.png" onclick="someOtherFunction(event);" />

javaScript 

 //this function stops the propagation and not triggered parent div's handler
function someOtherFunction(event) {
    event.stopImmediatePropagation();
    return false;
}

DEMO

Upvotes: 2

Related Questions