如何区分用户点击和 .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 处理程序。 ;)

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

How can you differentiate between a user click and .click()?

javascript

jquery

click

event-handling

kendo-ui