[英]Same click event to trigger on parent and child
我有一个导航结构,其中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');
.....
})
现在,如果我单击孩子,它将触发两次,一次触发给父母,另一次触发给孩子。
我经过这里的线程,但是我想要一些不同的东西。 我需要有一个对父母和孩子都适用的事件
使用event.stopPropgation()
停止通过DOM树冒泡事件,
$('#popUpComponentSetting').on("click","#navigationStructure li", function(e) {
e.stopPropagation();
//rest of your code
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.