jQuery，如何在单击时仅使用子处理程序

Question

我有一个简单的 html:

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

我有一个 JavaScript(使用 jQuery)代码。其中我有两个 click处理程序:一个处理程序应用于 <li>元素，并将一个处理程序应用于 <img>元素。

问题:如何分别使用这两个处理程序？我只想使用 <li>当用户单击 <li> 时的单击处理程序，并且只有<img>的处理程序，当用户单击 <img> 时标签。我如何通过 jQuery 实现这个？

Answer 1

只需在 img 处理程序上使用 event.stopPropagation 即可。见下文，

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