父元素在clild元素上触发的Click事件

时间:2018-10-10 10:15:32

标签: jquery

我在某个元素上有一个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事件而不是其父事件?谢谢

3 个答案:

答案 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()
});