So behandeln Sie ein Klickereignis für sap.ui.commons.Area in OpenUI5

Question

Ich verwende das ImageMap-Steuerelement, um mehrere anklickbare Bereiche auf einem Bild zu erstellen.

var oImage = new sap.ui.commons.Image("i1"); 
oImage.setSrc("images/FlowersAndWesp.jpg"); 
oImage.setAlt("alternative image text for i1"); 
oImage.setUseMap("Map1"); 
oImage.placeAt("sample1"); 

var oMap = new sap.ui.commons.ImageMap(); 
oMap.setName("Map1"); 
var aArea1 = new sap.ui.commons.Area ("Area1", {shape: "rect", alt: "Bee", href: "http://www.sap.com", coords: "40,20,100,80"}); 
var aArea2 = new sap.ui.commons.Area ("Area2", {shape: "circle", alt: "Flower", href: "http://www.sap.com", coords: "170,60,30"}); 
oMap.addArea(aArea1); 
oMap.addArea(aArea2); 
oMap.placeAt("sample1"); 

Wenn ich auf aArea1 klicken, sollte aArea2 statt href Click-Ereignis werden berufen und dass in ich einige Popup-Dialog schreiben kann.

Answer 1

Die sap.ui.commons.Area stellt kein Druckereignis selbst dar, sondern übergibt es an das übergeordnete Element ImageMap.

Wenn Sie also das Presseereignis eines Gebiets behandeln wollen, müssen Sie Ihre Logik an die ImageMap anschließen und das event Argument lesen, um herauszufinden, welcher Bereich gedrückt wurde.

Ein Beispiel, wie dies funktioniert, finden Sie unter https://jsbin.com/qujade/edit?html,output.