javascript - 仅当单击外部 li 时才触发事件

Question

我希望在单击外部列表的 li 时触发一个事件。我已经为其编写了一个函数，但即使我单击内部列表li，该事件也会被触发。请帮忙。

我有以下 HTML 结构:

  <ul class="nav nav-pills nav-stacked" id="outer-menu">
     <li id="R1"><a href="#">Sample Reports</a>
          <ul class="nav nav-pills nav-stacked" id="inner-menu">
        <li><a href="#">Employee salary report</a></li>
        <li><a href="#">Car sales Report</a></li>
        <li><a href="#">Business client report</a></li>
        </ul>
     </li>
    </ul>

和 jquery :

$(document).ready(function() {
    $('#outer-menu a').on('click',function(){
        alert("this clicked");
    });
});

Answer 1

您可以使用以下命令将匹配集限制为仅直接子项:

$('#outer-menu > li > a').on('click',function() {
    ...
});