I have a problem with event handling in dojox gfx.
Consider the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Example</title>
<!-- load Dojo -->
<script>
dojoConfig = {
async: true,
gfxRenderer: "svg,silverlight,vml" // svg gets priority
};
</script>
<script src="dojo/dojo.js"></script>
</head>
<body>
<script>
require(["dojox/gfx","dojox/gfx/Moveable","dojo/domReady!","dojox/gfx/fx"],function(gfx,Moveable,dom,gfxFx) {
var surface = gfx.createSurface("surfaceElement", 400, 400);
var rect = surface.createRect({ x: 30, y: 30, width: 100, height: 100 }).setFill('blue');
rect.connect('onclick',function(e) {
alert('first')
});
var otherRect = surface.createRect({ x: 30, y: 30, width: 100, height: 50 }).setFill('red');
});
</script>
<!-- DOM element which will become the surface -->
<div id="surfaceElement"></div>
</body>
</html>
Is there a way to handle the event of the blue rectangle when i click on the red one? Thanks
Just move the 2nd rectangle creation in front of the event listener and then refer to it by variable: