Question

我有一个表，其中每一行在第一个单元格中都有<input type="checkbox" />。

我在<tr>上设置了点击处理程序，其中包括切换复选框。

这是完美的，除非我点击实际的复选框，这导致复选框的状态与它应该被切换两次的状态相反，一次是默认行为，一次是{{ 1}}事件处理程序。

我想要做的基本上是忽略复选框点击，只是回应tr上的点击。

这是tr

的事件处理程序

<tr>

这是一个示例行：

$('.files-table tbody').on('click', 'tr', function (e) {
    var check = $('.check', this);
    check.prop('checked', !check.prop('checked'));

    check.prop('checked') ? selected++ : selected--;
    numSelected.html(selected + ' item' + (selected === 1 ? ' ' : 's ' ) + 'selected: ');
    if (selected == 1) {
        withSelected.addClass('in').removeClass('hide');
        noSelected.removeClass('in').addClass('hide');
    } else if (selected == 0) {
        withSelected.removeClass('in').addClass('hide');
        noSelected.addClass('in').removeClass('hide');
    }

    if (check.prop('checked')) {
        selectedItems[check.data('type')].push(check.data('id')+"");
    } else {
        selectedItems[check.data('type')].splice(check.data('id')+"");
    }
    console.log(selectedItems);
    $(this).toggleClass('info');
});

Answer 1

您可以查看点击源自哪里：

if ( ! $(e.target).is(':checkbox') ) {
    $('.check', this).prop('checked', function (i, el) {
        el.checked ? selected-- : selected++;
        return ! el.checked;
    });
}

Answer 2

阻止您的活动传播给父母：

$(".check").on('click', function (e) {
   e.stopPropagation();
});

这将允许复选框（切换检查状态）的正常行为继续，但您的点击事件将不会再转到父级再次单击。

忽略复选框点击？

2 个答案: