如何避免Jquery Kendo UI Splitter展开右侧面板时触发resize事件？

我懂你的烦恼——右侧面板折叠或展开时，因为面板尺寸变化会自动触发resize事件，导致左侧面板平白无故刷新。这里有个简单靠谱的方案，通过状态标记就能区分「折叠/展开操作」和「手动拖拽调整面板大小」：

核心思路 #

利用Kendo Splitter自带的collapse和expand事件设置一个状态标记，在resize事件里判断这个标记，只在手动调整面板尺寸时执行左侧面板的刷新逻辑。

代码实现示例 #

// 定义状态标记，区分是否为折叠/展开操作
let isCollapsingOrExpanding = false;

// 初始化Splitter组件
$("#splitter").kendoSplitter({
    panes: [
        { collapsible: false, content: "#left-pane" },
        { collapsible: true, content: "#right-pane" }
    ],
    // 折叠面板时，标记当前操作类型
    collapse: function(e) {
        isCollapsingOrExpanding = true;
    },
    // 展开面板时，标记操作类型，并延迟重置标记（确保resize事件能捕获到状态）
    expand: function(e) {
        isCollapsingOrExpanding = true;
        setTimeout(() => {
            isCollapsingOrExpanding = false;
        }, 100);
    },
    resize: function(e) {
        // 如果是折叠/展开触发的resize，直接跳过刷新逻辑
        if (isCollapsingOrExpanding) {
            isCollapsingOrExpanding = false;
            return;
        }
        
        // 这里执行你的左侧面板刷新逻辑
        refreshLeftPanel();
    }
});

// 你的左侧面板刷新函数
function refreshLeftPanel() {
    // 替换成你实际的刷新代码
    console.log("左侧面板已执行刷新");
}

为什么这样有效？ #

折叠或展开面板时，会先触发collapse/expand事件，我们在这些事件里把标记设为true。随后触发的resize事件会检查这个标记：如果是true，就说明是折叠/展开导致的resize，直接跳过刷新；如果是false，就判定为手动拖拽调整面板大小，执行预设的刷新逻辑。

用setTimeout延迟重置标记，是因为展开操作后，resize事件可能会稍有延迟触发，这样能确保resize事件正确捕获到状态。

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