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

Question

This is my XML fragment. I added this fragment in my main view. I know the fragment doesn't have its own controller, it uses main view controller. Here I added one event listener to HTML element and tried to handle it in main controller. But this event is not triggering. How to handle this event?
Can I write my own logic for this event using JavaScript or do I have to use a controller for this?
```
  
  
  
```

Like this, I added event for canvas in my controller file:

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

user_1960986 · Answer

Dom-Events bubble, there is no need to attache it directly. jQuery has a good API to utilise this feature.

The off call prevents double attachments in case onAfterRendering is called again because off data rebinding etc.

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");

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

1 Answers