在父子节点上触发相同的点击事件答案

【问题标题】：Same click event to trigger on parent and child在父子节点上触发相同的点击事件
【发布时间】：2014-08-13 06:50:56
【问题描述】：

我有一个导航结构，其中 html 元素具有父子关系。

<div id="navigationStructure">
<div class="addId">
    <ol class="sortable ui-sortable">
     <!----------Parent li for navigation ----------->
        <li data-title="Home" data-link="" data-target="_self" class="item_0">
            <div class="active">
               Home
            </div>
            <ol>
            <!----- CHILD li 1----------->
                <li data-title="About" data-link="" data-target="_self" style="display: list-item;" class="item_1">
                    <div class="">
                        About
                    </div>
                </li>
                <!--------- CHILD li 2------------>
                <li data-title="Products" data-link="" data-target="_self" style="display: list-item;" class="item_2">
                    <div class="">
                        Products
                    </div>
                </li>
            </ol>
        </li>
        <li data-title="Category" data-link="" data-target="_self" class="item_3">
            <div>
               Category
            </div>
            <ol>
                <li data-title="Contact" data-link="" data-target="_self" style="display: list-item;" class="item_4">
                    <div>
                      Contact
                    </div>
                </li>
            </ol>
        </li>
    </ol>
</div>

我正在尝试编写一个函数来触发父母或孩子的点击并选择它。

$('#popUpComponentSetting').on("click","#navigationStructure li", function() {
    $('#navigationStructure ol li div').removeClass('active');
    $('> div',this).addClass('active');
    navId = $(this).attr('class');
    .....
})

现在，如果我点击孩子，它会触发两次，一次用于父母，另一次用于孩子。

我经历了here 的线程，但我想要一些不同的东西。我需要有一个对父母和孩子都有效的相同事件

【问题讨论】：

标签： javascript jquery html parent-child

【解决方案1】：

使用 event.stopPropgation() 停止在 DOM 树中冒泡事件，

$('#popUpComponentSetting').on("click","#navigationStructure li", function(e) {
      e.stopPropagation();
      //rest of your code

【讨论】：

@VikasSatpute 如果您认为此答案满足您的需求，请尝试单击此答案提供的勾号，以向未来的访问者表明您的接受。这不是强迫... :)
由于堆栈时间限制，15分钟内无法完成！！ :P