CustomJSError : Cannot read properties of undefined (reading 'on')

### 问题分析 在帆软报表中，出现 `CustomJSError: Cannot read properties of undefined (reading 'on')` 错误，通常表明 JavaScript 代码试图访问一个未定义（`undefined`）对象的 `.on` 属性。该错误常出现在事件绑定逻辑中，例如使用 `on` 方法监听某个对象的事件时，该对象尚未正确初始化或引用路径错误。 在帆软报表中，此问题可能与对 `contentPane` 或其子对象（如 `TabPane` 或 `parameterEl`）的访问方式有关，尤其是在 sheet 页切换事件绑定或控件操作过程中[^1]。 ### 常见原因及解决方案 #### 1. **未正确等待 DOM 加载完成** 在参数面板或 sheet 页加载完成前执行脚本，可能导致 `contentPane` 或其子对象未定义。应确保脚本在 `afterload` 事件中执行，或使用 `setTimeout` 延迟执行以确保组件加载完成。 ```javascript setTimeout(function() { var tabPane = contentPane.$contentPane.data('TabPane'); if (tabPane) { tabPane.on('tabChange', function(event) { // 处理切换逻辑 }); } }, 500); ``` #### 2. **错误访问 `contentPane` 或其子对象** 确保在访问 `contentPane` 及其属性前进行存在性判断，避免直接调用未定义对象的方法。 ```javascript if (contentPane && contentPane.$contentPane) { var tabPane = contentPane.$contentPane.data('TabPane'); if (tabPane) { tabPane.on('tabChange', function(event) { var sheetName = event.detail.tab.options.name; // 处理逻辑 }); } } ``` #### 3. **事件绑定方式错误** 帆软报表中，推荐使用 `$contentPane.on('tabChange', ...)` 而非 `tabPane.on('tabChange', ...)`，以确保事件绑定正确生效。 ```javascript contentPane.$contentPane.on('tabChange', function(event) { var sheetName = event.detail.tab.options.name; var widget = contentPane.parameterEl.getWidgetByName("controlName"); if (sheetName === "Sheet1") { widget.setValue("ValueForSheet1"); } else if (sheetName === "Sheet2") { widget.setValue("ValueForSheet2"); } _g().parameterCommit(); }); ``` #### 4. **控件未正确初始化** 在访问控件前，应确保控件已加载完成。可通过 `parameterEl` 的 `afterInit` 事件确保控件可用。 ```javascript contentPane.parameterEl.afterInit = function() { var widget = contentPane.parameterEl.getWidgetByName("controlName"); if (widget) { widget.setValue("InitialValue"); } }; ``` ### 注意事项 - 避免在页面未完全加载时操作 DOM 或组件对象。 - 使用 `if` 条件判断对象是否存在，防止访问未定义属性。 - 在帆软报表中，`contentPane` 和 `parameterEl` 是核心对象，应确保其正确引用。 - 使用 `console.log()` 输出对象状态，有助于调试未定义问题。