JAVAFX How to make a button stacked behind a Label clickable

Question

How to make a button stacked behind a Label clickable?

Button

Button btn = new Button();
//TODO: button's main function, like onPressed, onReleased etc. here...

Custom label

CustomLabel sp = new CustomLabel("Some texts here"));
//TODO: custom label's main function, like a translucent background etc here...
//main purpose of this is to overlay the button

Main Pane

StackPane mainPane = new StackPane();
mainPane.getChildren.addAll(btn, sp);

With this, the area which the custom label overlays becomes unclickable.

Is there anyway to make the button still clickable even though overlay-ed, for example? Or is there another way to do it? Something like setting label to not visible on click?

EDIT : To answer Itamar Green 's question..

By using the example as shown in this link: Mouse Events get Ignored on the Underlying Layer , it still does not seems to work. The button stacked under the layer is still not clickable.

sp.setPickOnBounds(false);

Possible duplicate of [Mouse Events get Ignored on the Underlying Layer](http://stackoverflow.com/questions/24607969/mouse-events-get-ignored-on-the-underlying-layer) — ItamarG3, Dec 28 '16 at 06:18
If your custom label is read only (to only show something visually), then you can always set disable to true. This way it will not handle any mouse events. If setting disable to true makes it looks different, then you would need to set some css using `disabled` pseudoclass. — Jai, Dec 28 '16 at 07:44

score 4 · Accepted Answer · answered Dec 28 '16 at 08:47

You can set the mouseTransparent property of the element(s) drawn on top to true. Note that this way all descendants of the node are ignored for mouse events:

@Override
public void start(Stage primaryStage) {
    Button btn = new Button("Say 'Hello World'");
    btn.setOnAction((ActionEvent event) -> {
        System.out.println("Hello World!");
    });
    Region region = new Region();
    region.setStyle("-fx-background-color: #0000ff88;");
    region.setMouseTransparent(true);

    StackPane root = new StackPane(btn, region);

    Scene scene = new Scene(root, 100, 100);

    primaryStage.setScene(scene);
    primaryStage.show();
}

Comment out

region.setMouseTransparent(true);

and the button will no longer react to mouse events in any way...

score 0 · Answer 2 · answered Dec 28 '16 at 06:26

thanks for your help. I think I have solved my own question.

All I did was set a clickable event for my label.

Label sp = new Label("some texts here")
sp.setOnMouseClicked(new EventHandler<MouseEvent>() {
                  @Override
                  public void handle(MouseEvent e) {
                      //copy over the button's event.
                  }
                });

Not sure if there is any better way of doing this...

score 0 · Answer 3 · answered May 05 '20 at 05:34

0

in addition with the correct answer. you can enable or disable " mouse transparent " property via fxml with scenebuilder

answered May 05 '20 at 05:34

Giovanni Contreras

2,345
1
13
22

JAVAFX How to make a button stacked behind a Label clickable

3 Answers3