如何为UI5 XML视图中添加的HTML canvas元素绑定事件监听器

事件未触发的原因及解决方法 #

你直接在XML的<html:canvas>标签上写onclick="canvasCalled()"时，该事件回调会默认查找全局window作用域下的canvasCalled方法，并不会自动关联到SAPUI5主控制器中定义的同名方法，这就是事件没有触发的核心原因。

你可以按照如下步骤修复：

1. 先删除XML中canvas标签上的onclick="canvasCalled()"属性
2. 在主控制器的onAfterRendering生命周期钩子中获取canvas的DOM实例，手动绑定事件即可，示例代码如下：

onAfterRendering: function () {
    // 获取canvas对应的DOM元素
    const canvasDom = this.getView().byId("AnnCanvas").getDomRef();
    // 绑定点击事件，同时将方法内this指向绑定为当前控制器实例
    canvasDom.addEventListener("click", this.canvasCalled.bind(this));
},
canvasCalled: function () {
    MessageToast.show("canvas Called");
},

事件逻辑实现方式说明 #

你既可以直接用原生JavaScript编写事件逻辑，也可以通过控制器实现，两者的区别如下：

• 直接写原生JS逻辑：可以把canvasCalled定义为全局方法，或者直接在addEventListener里写匿名回调即可触发。但这种方式会脱离SAPUI5的上下文管理，你无法在逻辑中直接访问控制器内的模型、路由、其他封装方法等资源，还容易造成全局作用域污染，仅适合非常简单的一次性逻辑。
• 通过控制器实现：符合SAPUI5的MVC规范，能正常访问框架提供的所有能力，后续维护成本更低，是更推荐的实现方式。

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