javascript - 注册单击列表项子元素

Question

我有以下 HTML 结构:

<li class="is_tab" id="geometry_tab">
     <a data-toggle="collapse" href="#geometry_tab_collapse">
         <i class="pe-7s-plugin"></i>
         <p>Geometry
            <b class="caret"></b>
         </p>
     </a>
     <div class="collapse" id="geometry_tab_collapse">
         <ul class="nav">
             <li class="is_tab" id="pipe_geometry_tab"><a href="#">Pipe Geometry</a></li>
         </ul>
     </div>
</li>

使用 jQuery，我的目标是检索 <li>点击时的 ID，无论用户是否点击 li.is_tab , li.is_tab > a , li.is_tab > a > p , 或 li.is_tab > a > i .此外，我希望同一个事件处理程序能够区分对 #pipe_geometry_tab 的点击。和 #geometry_tab ，即，当点击一个或另一个时，简单地返回一个正确的 ID。

我的问题是:

给定以下片段，

$(<selector>).on("click", function(){...})

有没有<selector>将在 li.is_tab 上注册一个单点击不管它还是它的a , i , 或 p child 被点击？

如果没有，我将不胜感激有关如何进行此操作的任何建议。

PS 我已经尝试了很多东西，但我希望更有经验的人觉得这有一个明显的解决方案，而不是用它们来膨胀这篇文章。

Answer 1

$('li.is_tab').on("click", function(e){...});

^^ 这应该可以正常工作，并且将处理在 li 上单击的任何内容。

如果你想要被点击的 li 你可以查看 e.currentTarget 如果你想看到被点击的实际元素你可以使用 e .目标<​​

---

因此，如果您想要被点击的li 的id，您可以使用e.currentTarget.id