Question

I have a simple html:

<ul>
   <li>
      <img src"..."/>
      <div>...</div>
   </li>
   <li>
      <img src"..."/>
      <div>...</div>
   </li>
   <li>
      <img src"..."/>
      <div>...</div>
   </li>
</ul>

I have a JavaScript (using jQuery) code. In it I have two click handlers: one handler is applied to <li> element, and one handler is applied to <img> element.

Question: How can I use the two handlers separately? I want to use only the <li>‘s click handler when a user clicks an <li>, and only the <img>‘s handler, when a user clicks an <img> tag. How can I implement this via jQuery?

Answer 1

Simply use event.stopPropagation on img handler. See below,

$('img').click(function (e) {
   e.stopPropagation();
});