停止点击子项目
Stop click from firing on sub items
本文关键字:子项目 更新时间:2023-09-26
我有这样的html:
<ul>
<li class="database">Item One
<ul>
<li>Sub One</li>
<li>Sub Two</li>
<li>Sub Three</li>
</ul>
</li>
<li class="database">Item Two
<ul>
<li>Sub One</li>
<li>Sub Two</li>
<li>Sub Three</li>
</ul>
</li>
<ul>
然后,我创建了这个JavaScript,以便在单击时隐藏/显示子列表。
$(document).on('click', 'li.database', function (e) {
e.stopPropagation();
$(this).children('ul').children('li').toggle();
});
它可以工作,但无论我是否单击子菜单,它都会隐藏列表。如何仅在单击根li
时隐藏项目?我想最终让子项目在点击时有自己的事件。
您可以检查e.target
是否与e.currentTarget
相同。
这是因为e.target
是触发事件的元素,而e.currentTarget
是事件侦听器所附加的元素
此处示例
$(document).on('click', 'li.database', function (e) {
if (e.target === e.currentTarget) {
$(this).children('ul').children('li').toggle();
}
});
检查单击了哪个target
。e.target
。
在子项的单击事件中使用e.stopPropagation()
。
尝试创建一个id标记并引用它,而不是类名。这样,您就可以通过id来分隔数据库。