JavaFX MouseEvent continues when I remove the object it happened on

Question

It took me a while to realize what was going on with mouse events going through my blocking dialog boxes when I closed them, but I finally figured out why. I still don't know any good way to fix it.

I have a custom dialog box (that blocks the mouse) with a close button. When I click the close button, I remove the dialog box from the scene, but JavaFx is still processing the MouseEvent and now it finds that there is nothing blocking the screen behind where the cancel button was, so that component receives a MouseEvent. How do I make the mouseEvent stop processing when I see that they pressed cancel and remove the dialog box? Or, is there a way to make the removing of the dialog box not happen until after it is done processing the MouseEvent?

Example Code for the problem:

import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.scene.input.MouseEvent;
import javafx.scene.control.Button;

var theScene:Scene;
var btn:Button;

Stage {
   title: "Application title"
   scene: theScene= Scene {
      width: 500
      height: 200
      content: [
         Rectangle{
            width: bind theScene.width
            height: bind theScene.height
            onMouseClicked: function(e:MouseEvent):Void{
                              println("Rectangle");}
         },
         Button{
            layoutX: 20   layoutY: 50
            blocksMouse: true
            text: "JustPrint"
            action:function():Void{
                  println("JustPrint");}
         },
         btn = Button{
            layoutX: 20   layoutY: 20
            blocksMouse: true
            text: "Cancel"
            action:function():Void{
                  println("Cancel");
                  delete btn from theScene.content;}
         },
      ]
   }
}

When you press "JustPrint" you get:

JustPrint

When you press "Cancel" you get:

  Cancel
  Rectangle

Answer 1

Do you really need to handle onMouseClicked on the rectangle? If you change it to onMousePressed, your problem is gone.

Apparently, the button need the full mouse pressed/mouse released sequence to do the action but the deletion (or hiding) happens before the second one is intercepted. And it seems that a mouse release event is enough to trigger the onMouseClicked event. So if your rectangle is happy with a simple onMousePressed, you have a workaround...

Answer 2

I think what you are seeing is a timing issue. The cancel button is removed prior to the event being totally handled, thus the event is then passed to the Rect, because the "blocksmouse" on the Cancel button has been removed. Try this instead:

     action:function():Void{
          println("Cancel");
          FX.deferAction( function() {
            delete btn from theScene.content;
          });
     }