Kendo Org Chart选择事件持续触发问题求助

问题场景 #

使用基础版Kendo Org Chart时，点击节点触发select事件弹出alert（或业务中提交表单打开新页面），关闭弹窗/完成操作后select事件会再次触发，导致逻辑重复执行。

当前代码示例：

$("#orgchart").kendoOrgChart({
    editable: false,
    dataSource: dataSource,
    select: onSelect,
});

function onSelect(e) {
    e.preventDefault();
    alert(e.dataItems[0].id);
};

解决方案 #

问题根源是弹窗关闭后，焦点回到Org Chart节点，会再次触发select事件。以下是几种可行的解决方式：

方式1：标志位控制触发状态 #

添加一个状态标记，拦截重复触发的事件：

let isHandlingSelect = false;

$("#orgchart").kendoOrgChart({
    editable: false,
    dataSource: dataSource,
    select: onSelect,
});

function onSelect(e) {
    e.preventDefault();
    if (isHandlingSelect) {
        isHandlingSelect = false;
        return;
    }
    isHandlingSelect = true;
    alert(e.dataItems[0].id);
};

方式2：临时解绑再重新绑定事件 #

在执行业务逻辑前临时解绑select事件，完成后延迟重新绑定：

function onSelect(e) {
    e.preventDefault();
    const orgChartInstance = $("#orgchart").data("kendoOrgChart");
    // 临时解绑事件
    orgChartInstance.unbind("select");
    
    alert(e.dataItems[0].id);
    
    // 延迟重新绑定，避开焦点回归的触发时机
    setTimeout(() => {
        orgChartInstance.bind("select", onSelect);
    }, 100);
};

$("#orgchart").kendoOrgChart({
    editable: false,
    dataSource: dataSource,
    select: onSelect,
});

方式3：利用事件属性区分触发源（部分版本适用） #

部分Kendo UI版本中，事件对象带有isTrigger属性，可用来区分用户手动触发和代码自动触发：

function onSelect(e) {
    e.preventDefault();
    // 跳过代码触发的重复事件
    if (e.isTrigger) return;
    alert(e.dataItems[0].id);
};

原理说明 #

当alert弹窗关闭后，浏览器会将焦点重新定位到之前点击的Org Chart节点，而Kendo Org Chart的节点在获取焦点时会再次触发select事件，导致逻辑重复执行。上述方案通过拦截重复触发、临时阻断事件绑定等方式，避免了重复执行问题。

内容的提问来源于stack exchange，提问作者KnightsOfTheRoun