如何在 OpenUI5 中处理 sap.ui.commons.Area 的点击事件

Question

我正在使用 ImageMap 控件在图像上制作多个可点击区域。

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

当我点击 aArea1 时，应该调用 aArea2 而不是 href click 事件，这样我就可以编写一些弹出对话框。

Answer 1

sap.ui.commons.Area 本身不公开新闻事件，而是将其传递给父 ImageMap。

所以如果你想处理一个区域的按下事件，你必须将你的逻辑连接到 ImageMap 并读取 event 参数以找出哪个区域被按下按下。

请参阅 https://jsbin.com/qujade/edit?html,output 了解其工作原理的示例。

如何在 OpenUI5 中处理 sap.ui.commons.Area 的点击事件

How to handle click event for sap.ui.commons.Area in OpenUI5

imagemap

sapui5