如何在 OpenUI5 中处理 sap.ui.commons.Area 的点击事件
How to handle click event for sap.ui.commons.Area in OpenUI5
我正在使用 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 事件,这样我就可以编写一些弹出对话框。
sap.ui.commons.Area
本身不公开新闻事件,而是将其传递给父 ImageMap
。
所以如果你想处理一个区域的按下事件,你必须将你的逻辑连接到 ImageMap
并读取 event
参数以找出哪个区域被按下按下。
请参阅 https://jsbin.com/qujade/edit?html,output 了解其工作原理的示例。
我正在使用 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 事件,这样我就可以编写一些弹出对话框。
sap.ui.commons.Area
本身不公开新闻事件,而是将其传递给父 ImageMap
。
所以如果你想处理一个区域的按下事件,你必须将你的逻辑连接到 ImageMap
并读取 event
参数以找出哪个区域被按下按下。
请参阅 https://jsbin.com/qujade/edit?html,output 了解其工作原理的示例。