javascript - 如何避免在单击子元素时在父元素上触发事件？

Question

我有一个表，里面有一些数据。当我单击一个元素时，它会添加一个类 .active 到:

 $('#someId').on('click', 'tr', function (e) {
        var target = $(this).find(".target");
        var prev = target.html();
        timeCell.html(target.data('prev'));
        timeCell.data('prev', prev);
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');

        } else {
            $(this).addClass('active');

        }

    });

正如您在单击 tr 后所看到的，用户可以看到一些图标而不是以前的数据 (.target)，我希望他们单击​​调用一些其他函数的图标(“prev”)。但是，当单击图标时，也会执行对父元素的单击。 如何避免这种情况？

----如果有人在这种情况下需要帮助 - 这就是解决方案!

 $('#someId').on('click', 'tr', function (e) {
 var senderName = e.target.tagName.toLowerCase();
        if (senderName === 'div') {
           //do some staff
        } else {
        var target = $(this).find(".target");
        var prev = target.html();
        timeCell.html(target.data('prev'));
        timeCell.data('prev', prev);
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');

        } else {
            $(this).addClass('active');

        }

    });

Answer 1

父级点击事件的原因<tr>元素被触发是由于事件冒泡。您可以阻止子节点内发出的单击事件冒泡(并被绑定(bind)到父节点的单击事件监听器捕获)，只需调用 event.stopPropagation()在子点击事件中，即:

$('#someId').on('click', 'tr', function (e) {

    // Stop click event from bubbling up to parent and getting captured
    e.stopPropagation();

    // Rest of the logic
    var target = $(this).find(".target");
    var prev = target.html();
    timeCell.html(target.data('prev'));
    timeCell.data('prev', prev);
    if ($(this).hasClass('active')) {
        $(this).removeClass('active');
    } else {
        $(this).addClass('active');
    }

});