我有两个组件被绝对定位在一个容器中(如果有帮助,它们是 ILOG Elixir 地图上的 MapSymbols)。每个组件都是一个带有 Image 和 Label 的 VBox。图像具有与 Click 事件相关的功能;标签没有。
问题是当 2 个项目定位时,一个项目的标签在 z-index 中位于另一个项目的图标上方,因此标签会吃掉任何 mouseOver 和 mouseDown 事件。冒泡没有帮助,因为它从标签冒泡到 vbox 再到容器,永远不会碰到下部元素。我不能将 vbox 设置为 mouseChildren="false",因为这也会阻止图像被点击。
有什么我可以做的吗?组件的位置和数量是数据驱动的,不是我可以控制的。
编辑:一些澄清。每个不同的组件的结构如下:
<VBox>
<Image source="whatever" click="handleClick()"/>
<Label text="{item.label}/>
</VBox>
问题是当这些 vbox 中的两个靠得很近时——一个框的标签可能在另一个框的图像上方,从而阻止您与较低的那个进行交互。
(来源:imnotpete.com)
在该示例中,第二个标签阻止了下部图标——鼠标事件仅在您与该图标的下半部分交互时传递。
将 VBox 设置为mouseEnabled="false"
并将标签设置为mouseEnabled="false" mouseChildren="false"
似乎没有任何效果 - 标签仍然阻止下部图像接收鼠标事件。