在底层图层上忽略鼠标事件 [英] Mouse Events get Ignored on the Underlying Layer
问题描述
我有两层（= AnchorPanes）与StackPane堆叠在一起。所以这两个层都填满整个场景。问题是，只有顶层接收鼠标事件。
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.
这是如何构建场景：
仅按钮B收到点击事件但按钮A没有。
Only Button B receives click events but Button A not.
如果我将图层B设置为鼠标透明（ layerB.setMouseTransparent（true）），按钮A接收鼠标事件。但鼠标透明效果也是所有孩子，所以Button B不再接收鼠标事件。
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.
如何让按钮A和按钮B接收鼠标事件？
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);
}
}
推荐答案
解决方案
在示例代码中添加以下行：
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).
替代性解释
如果你真的想拦截和处理鼠标事件在所有图层中，然后查看Uluk评论中的链接问题：
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
方法描述
setPickOnBounds 方法：
定义拣货方式当由
MouseEvent或包含函数调用触发时，对该节点进行计算。如果pickOnBounds为真，则通过与此节点的边界相交来计算拾取，否则通过与此节点的几何形状相交来计算拾取。
Defines how the picking computation is done for this node when triggered by a
MouseEventor a contains function call. IfpickOnBoundsis 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?
对于modena.css，JavaFX 8附带的默认样式表，Panes默认情况下确实有一个非常微弱的阴影背景，所以他们可以消耗鼠标事件。要防止这种情况，您可以将窗格的背景颜色设置为null，或将窗格设置为 mouseTransparent 。
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.
这种行为在JavaFX 2和JavaFX 8之间发生了变化.JavaFX 2附带了一个名为caspian的默认样式表.css，没有为Panes设置背景。
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.
这篇关于在底层图层上忽略鼠标事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
