问题描述
运行下面的这段Bootstrap HTML和JS代码时,我很难在单击下拉导航链接(例如,标记为已读)时不启动模式。
<ul id="notification_items" class="navi navi-hover">
<!--begin::Item-->
<li id="1f7cbbe4-2345-486a-ab66-b05601f033a9" data-notification-id="1f7cbbe4-2345-486a-ab66-b05601f033a9" data-notification-subject="Some Subject" data-notification-message="And some message" class="notification_item cursor-pointer navi-item">
<div class="pr-10 pl-2 navi-link">
<div class="navi-label mx-5"><span class="label label-dot label-lg label-primary mt-n6"></span></div>
<div class="navi-text">
<span class="font-weight-bolder font-size-lg">Some Subject</span><span class="text-muted"> - And some message</span>
<div class="text-muted font-size-sm">3 hours ago</div>
</div>
<div class="notification_actions dropdown dropdown-inline d-none">
<a href="javascript:;" class="btn btn-sm btn-clean btn-icon btn-hover-transparent-primary mr-2" data-toggle="dropdown" aria-expanded="false"><i class="far fa-ellipsis-h"></i></a>
<div class="dropdown-menu dropdown-menu-sm dropdown-menu-right" style="">
<ul class="navi flex-column navi-hover py-2">
<li class="navi-item"><span data-notification-id="1f7cbbe4-2345-486a-ab66-b05601f033a9" class="notification_mark_as_read navi-link"><span class="navi-icon"><i class="fad fa-comment-check"></i></span><span class="navi-text">Mark as Read</span></span></li>
<div class="dropdown-divider"></div>
<li class="navi-item"><a href="#" class="navi-link" data-toggle="modal"><span class="navi-icon"><i class="far fa-trash-alt text-danger"></i></span><span class="navi-text text-danger">Delete</span></a></li>
</ul>
</div>
</div>
</div>
</li>
<!--end::Item-->
</ul>
$(document).on("click",".notification_item",function () {
$('#notification').modal('show');
});
我点击e.stopPropagation();
时尝试.notification_actions
,该按钮本来可以工作,但是显然其他所有事件都不再起作用。
解决方法
您必须使用click事件的事件参数中的参数:target
和currentTarget
-
target
将返回发生点击的DOM元素 最初 -
currentTarget
将始终是您的处理程序所依赖的DOM元素 已附加->在您的情况下为li.notification_item
解决方案是识别点击发生的元素-target
。有很多方法-您可以通过遍历DOM直到根菜单(.dropdown-menu
)来检测单击是否在下拉导航链接(#notification_items
)中发生:
$(document).on("click",".notification_item",function (e) {
// you traverse up to the root ul,and looking if you are in a dropdown menu
if ($(e.target).closest('.dropdown-menu','#notification_items').length > 0) {
// You are in a drop down menu -> do nothing
} else {
// you are somewhere else -> trigger the modal
$('#notification').modal('show');
}
});
P.S。该代码检查您是否在下拉菜单中,如果要检查特定的下拉菜单,则可以使用特定的选择器。