注册单击列表项 child 元素

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，我的 objective 是在点击时检索 <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 children 被点击了？

如果没有，我将不胜感激关于如何解决这个问题的任何建议。

PS 我已经尝试了很多东西，但与其让这个 post 膨胀，我希望更有经验的人觉得这有一个明显的解决方案。

Answer 1

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

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

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

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

注册单击列表项 child 元素

Register single click on list item child elements

html

javascript

jquery

我的问题是：