我在某个元素上有一个click事件,但要防止在单击子元素时触发它(它们具有自己的click事件)。这是我的HTML。
<div class="mailholderwrap" data-msgid="813">
<div class="from">John Smith</div>
<div class="subject"><i class="fa fa-star mail_action_link"></i> This is test message subject</div>
<div class="actions"><i class="fa fa-upload mail_action_link"></i><i class="fa fa-download mail_action_link"></i><i class="fa fa-eye mail_action_link"></i></div>
</div>
这些图标具有自己的点击操作。问题在于它们没有触发,而是触发了.mailholderwrap
上的click事件。我的jQuery代码
$('.mailholderwrap').click(function() {
var messageId = $(this).attr('data-msgid');
console.log(messageId);
});
如何排除类mail_action_link
来执行其自己的click事件而不是其父事件?谢谢
答案 0 :(得分:1)
您需要使用event.stopPropagation()
来阻止事件在您的孩子点击事件中冒泡,请选中此stoppropagation
$(".mail_action_link").click(function(e){
e.stopPropagation();
})
答案 1 :(得分:0)
您需要查询事件的目标,以查看单击了哪个元素。如果不是父母,则可以退出。
$('.mailholderwrap').on('click', evt => {
if (!$(evt.target).is('.mailholderwrap')) return; //<-- allow only on parent
var messageId = $(this).attr('data-msgid');
console.log(messageId);
});
答案 2 :(得分:0)
像这样使用event.stopPropagation()
$('.mail_action_link').click(function(event) {
event.stopPropagation()
});