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>元素上的click事件的原因是事件冒泡。您可以停止子节点内发出的click事件冒泡（并由绑定到父节点的click事件侦听器捕获），只需在子点击事件中调用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');
    }

});

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

1 个答案: