Not allowing a component underneath a canvas to be clickable when the canvas is visible in Flex 3

1
votes

I have a component (a canvas) that has a click event listener on it. However, there is sometimes an opaque canvas that lays over that component. When that overlaying canvas is visible, I don't want the underlying component to be clickable.

Is there a way to do this without manually removing the click event listener when the overlaying canvas becomes visible and adding back the click event listener when the overlaying canvas becomes invisible?

As a side note, interestingly enough, the overlaying canvas contains label elements and when the overlaying canvas is visible, the underlaying component is only clickable for the area of the overlaying canvas where there is not a label element.

Also, since this is Flex, I should note that the click event listener was originally added through Actionscript and not through mxml.

3
apache-flexflex3canvasclick
You could always put a check in your Canvas click event handler to see if the opaque canvas visibility property is set to true before running any additional code. – Jason Towne
@Jason Thanks, that should work on the click event logic. Similarly though, I also don't want there to be the hand cursor when the mouse is over the visible overlaying canvas (and there is the underlying component underneath). Is there a way to do that without having to manually change the the hand cursor/button mode properties of the underlying component when the overlaying canvas becomes visible/invisible? – Steven

3 Answers

1
votes

I believe what you want to do is set mouseEnabled="true" and useHandCursor="false" on the opaque canvas. That should stop any mouse events to go 'through' the canvas.

0
votes

I'm pretty sure if you set the mouseEnabled and mouseFocusEnabled properties to false, then the canvas will not fire the click event handler.

Of course, I didn't think canvases (or any Container) could be Clickable; so for the event to fire; there has to be something inside the canvas that actually fires the click event. I'm not sure if the mouseEnabled and mouseFocusEnabled properties trickle down to the container's children.

0
votes

Just mask the opaque canvas so it wont be over the canvas with the click effect