如何区分用户点击和 .click()？

Question

对于我一直在开发的 Web 应用程序，我一直在使用 Kendo UI，因此我不必编写一堆组件。我有 6 个网格位于标签条内，并应用了 .Select() 标记，因此网格中出现了复选框。例如，当您在网格 1 中进行选择时，它会启用包含网格 2 的选项卡。 如果您从网格 1 中删除了所有选择，则会禁用所有以下网格。另一个要求是它还应该清除您在这些子网格中所做的任何选择。

我一直在使用这种方法来取消选中给定网格中的所有内容：

function uncheckAll(gridID) {
    const inputString = gridID + " input[type='checkbox']:checked";
    const checked = $(inputString);
    const selectAll = $(gridID + " input[type='checkbox']:first")[0].checked;
    if (selectAll) {
        let checkedExcludingCheckAll = [];
        for (let i = 1; i < checked.length; i++) {
            checkedExcludingCheckAll.push(checked[i]);
        }
        for (row of checkedExcludingCheckAll) {
            row.click();
        }
    } else {
        for (row of checked) {
            row.click();
        }
    }
}

代码完全按照预期工作。问题是，当您从更高级别的网格中取消选择所有内容时，因为此代码调用 click 事件，它会调用每个其他网格的所有其他事件处理程序，并遍历每个子网格（最多 5 个) 并取消选择所有内容。渐近地，这有点像一场噩梦。

我最后修改了我的代码，只抓取在当前启用的选项卡中所做的选择。存储在禁用选项卡内的网格中存在的任何选择都将被忽略，这意味着它是我的代码不需要遍历每个网格并触发所有这些事件。

所以，如果我可以强制uncheckAll()仅取消选中直接子网格中的项目，而不触发所有那些不必要的事件，那将是非常棒的。实现这一目标的最佳方法是什么？我已经考虑暂时禁用row.click() 行的事件处理程序，但这会导致一些意外行为。我在这里有什么选择？

编辑：更多代码示例。当row.click() 被调用时，click 事件会运行到这些运行其余代码的事件处理程序中。

function dataBound() {
   // this handler reads only the 'select all' box
   $('#Grid.k-checkbox:first').unbind('click').on('click', () => {
       // ...
       // function calls that call uncheckAll() within them if a condition is satisfied
   }
   // read in any checkbox in the grid that isn't the 'select all' box
   $('#Grid.k-checkbox:not(:first)').on('change', clickOneCheckbox);
}

function clickOneCheckbox() {
    // ...
    // function calls that call uncheckAll() within them if a condition is satisfied
}

Answer 1

而不是触发click 事件来取消选中...更改cheched 属性。

$("checkboxSelector").prop("checked", false);

这不会触发其他 click 处理程序。 ;)