jquery - 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>'s click 处理程序，而当用户单击标签时，我只想使用 's 处理程序。我如何通过 jQuery 实现这个？<li><img><img>

Answer 1

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

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

Answer 2

从您的li处理程序中检查目标：

$('li').click(function (e) {
    if (e.target).is('img') return;
    // Now run the rest of your code...
});