如何将事件侦听器添加到添加到 UI5 中的 XML 视图的 HTML canvas 元素？

Question

这是我的XML片段。我在主视图中添加了这个片段。我知道片段没有自己的控制器，它使用主视图控制器。在这里，我向 HTML <canvas> 元素添加了一个事件侦听器，并尝试在主控制器中处理它。但是这个事件没有触发。如何处理这个事件？

我可以使用 JavaScript 为这个事件编写自己的逻辑吗？还是我必须为此使用控制器？

<VBox xmlns="sap.m" xmlns:html="http://www.w3.org/1999/xhtml" class="sapUiSmallMargin">
  <!-- ... -->
  <html:canvas id="AnnCanvas"
    width="500px"
    height="500px"
    onclick="canvasCalled()"
    style="border:1px solid red; background-color:green; position:absolute;"></html:canvas>
  <!-- ... -->
</VBox>

像这样，我在控制器文件中为 canvas 添加了事件：

canvasCalled: function () {
  MessageToast.show("canvas Called");
},

Answer 1

Dom-Events bubble，不用直接附上。 jQuery 有一个 good API 可以利用此功能。

off 调用防止双重附件，以防万一 onAfterRendering 由于关闭数据重新绑定等而再次调用

sap.ui.controller("view1.initial", {
  onInit: function(){
    this._sCanvasWrapperID =  '#' + this.getView().byId("canvasWrapper").getId();
  },
  destroy: function(){
    $(this._sCanvasWrapperID).off();
  },
  onAfterRendering: function() {
    $(this._sCanvasWrapperID).off().on("click contextmenu","canvas", this.onCanvasEvent.bind(this));
    // instead of this._sCanvasWrapperID, you can also use 'canvas' and let the event bubble till dom-root. 
    // $('canvas').off().on("click contextmenu", this.onCanvasEvent.bind(this));
  },
  onCanvasEvent: function(oJqueryEvent){
     event.preventDefault();
     console.log(`${this.getView().getId()} received event: ${event.type}`);
  }

});

sap.ui.xmlview("main", {
  viewContent: jQuery("#view1").html()
}).placeAt("uiArea");

<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-compatVersion="edge" data-sap-ui-libs="sap.m"></script>

<div id="uiArea"></div>

<script id="view1" type="ui5/xmlview">
  <mvc:View controllerName="view1.initial" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns:html="http://www.w3.org/1999/xhtml">
    <VBox id="canvasWrapper" class="sapUiSmallMargin">
      <!-- ... -->
      <html:canvas width="500px" height="500px" style="border:1px solid red; background-color:green; position:absolute;"></html:canvas>
      <!-- ... -->
    </VBox>
  </mvc:View>
</script>

如何将事件侦听器添加到添加到 UI5 中的 XML 视图的 HTML canvas 元素？

How to add event listener to HTML canvas element added to XML view in UI5?

javascript

sapui5