Mouse Events get Ignored on the Underlying Layer

Question

I have two layers (= AnchorPanes) stacked one of the other with a StackPane. So both layer fill the whole scene. The problem is, that only the top layer receives mouse events.

Thats how the scene is build:

Only Button B receives click events but Button A not.

If I set Layer B to mouse transparent (layerB.setMouseTransparent(true)), Button A receives mouse events. But mouse transparent effects also all children, so Button B dont receives mouse events any more.

How to get Button A and Button B to receive mouse events?

Here is the full working source:

public class LayerTest extends Application {
    @Override
    public void start(final Stage primaryStage) throws Exception {
        final Node layerA = createLayerA();
        final Node layerB = createLayerB();
        final Parent root = new StackPane(layerA, layerB);
        final Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.setWidth(250);
        primaryStage.setHeight(200);
        primaryStage.show();
    }

    private Node createLayerA() {
        final AnchorPane layerA = new AnchorPane();
        final Button buttonA = new Button("Button A");
        AnchorPane.setLeftAnchor(buttonA, 10d);
        AnchorPane.setTopAnchor(buttonA, 10d);
        buttonA.setOnMouseClicked(e -> System.out.println("Button A clicked"));
        layerA.getChildren().setAll(buttonA);
        return layerA;
    }

    private Node createLayerB() {
        final AnchorPane layerB = new AnchorPane();
        final Button buttonB = new Button("Button B");
        AnchorPane.setRightAnchor(buttonB, 10d);
        AnchorPane.setBottomAnchor(buttonB, 10d);
        buttonB.setOnMouseClicked(e -> System.out.println("Button B clicked"));
        layerB.getChildren().setAll(buttonB);
        return layerB;
    }

    public static void main(String[] args) {
        launch(args);
    }
}

Answer 1

Solution

Add the following line to your sample code:

layerB.setPickOnBounds(false);

This will allow the mouse to interact with the visible elements you can see through the layers of your stacked elements.

If elements in the top layer overlap elements in the bottom layer clicking on the part of the top layer which overlaps the bottom layer will have the top layer consume the mouse event and the bottom layer will not receive it (which is probably what you want).

Alternate Interpretation

If you actually wanted to intercept and handle the mouse event in all layers then see the linked questions from Uluk's comments:

• JavaFX 2 event dispatching to underlying nodes
• JavaFx, event interception/consumption

Method Description

A description of the setPickOnBounds method:

Defines how the picking computation is done for this node when triggered by a MouseEvent or a contains function call. If pickOnBounds is true, then picking is computed by intersecting with the bounds of this node, else picking is computed by intersecting with the geometric shape of this node.

---

Panes have no visible background by default, so why they should consume mouse events?

For modena.css, the default stylesheet that ships with JavaFX 8, Panes actually do have a very faint shaded background by default, so they can consume mouse events. To prevent this you can either set the background color of the pane to null or set the Pane to mouseTransparent.

This behavior changed between JavaFX 2 and JavaFX 8. JavaFX 2 shipped with a default stylesheet named caspian.css, which does not set a background for Panes.

Answer 2

This cant work becouse the Event is catched by LayerB. You can set LayerB to MouseTransparent

layerB.setMouseTransparent(true)

But im not sure that button b is mousetranparent too after this.

Just give it a try, ohterwise do you thoughts about a different layout.