Flex 4 在鼠标悬停时显示交互式容器
目前我正在尝试创建一个位于另一个容器 A 内的容器 B。 容器 B 默认情况下是不可见的，当进入容器 A 时，它应该变得可见并且可以交互。 （将容器 B 想象为一个按钮）
我使用以下代码
<fx:Script>
<![CDATA[
protected function mouseOverHandler(event:MouseEvent):void
{
this.voter.conB = true;
this.voter.conB = true;
this.addElement(this.conB);
}
protected function mouseOutHandler(event:MouseEvent):void
{
this.conB.visible = false;
this.conB.enabled = false;
this.addElement(this.conA);
}
]]>
</fx:Script>
<s:element id="conB" visible="false"/>
<s:element id="conA" mouseOver="mouseOverHandler(event)" mouseOut="mouseOutHandler(event)"/>
基本上它的工作原理，我遇到的问题是，当我滚动容器 B 时，flex 将其计为容器 A 中的 mouseOutEvent，这使得容器 B 再次不可见，而不是再次鼠标位于容器 A 上，因为 B 不可见，并且 B 再次被触发可见。 结果是容器 b 上出现闪烁效果，这也导致无法单击容器 b 内的按钮。
有什么想法可以解决这个问题/以另一种方式实现我的意图吗？
Currently i'm trying to create a container B which is within another container A.
Container B is invisible by default, when entering container A it is supposed to turn visible and be interactive. (imagine container B as a button)
i'm using the following code
<fx:Script>
<![CDATA[
protected function mouseOverHandler(event:MouseEvent):void
{
this.voter.conB = true;
this.voter.conB = true;
this.addElement(this.conB);
}
protected function mouseOutHandler(event:MouseEvent):void
{
this.conB.visible = false;
this.conB.enabled = false;
this.addElement(this.conA);
}
]]>
</fx:Script>
<s:element id="conB" visible="false"/>
<s:element id="conA" mouseOver="mouseOverHandler(event)" mouseOut="mouseOutHandler(event)"/>
Basicly its working, the problem that i have is that when i roll over containerB then flex counts that as mouseOutEvent from container A, which makes containerB invisible again, than again the mouse is on container A since B is invisible and B again gets triggered visible.
the result is a flicker effect on container b, which also makes it impossible to click the button within container b.
any ideas how to solve that problem / another way to realize what i intend?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
嗯，不，这不是问题。
代码如下：
基本上，我使用 Spark 按钮类的自定义皮肤（此处名为“测试”）对其进行了测试，这里是它的样子，但就像我说的，它是未编辑纯自动- 为 Spark 按钮类定义新皮肤时生成的 Flex 代码
接下来，我们将自定义组件命名为“容器”
，最后我们将其放入主应用程序中，例如：
现在，如果您尝试这样做，您将看到自定义 Spark此容器内的按钮组件不可单击。然而，标准的 s:button 组件是可点击的，我不知道为什么。
Hmm no thats not the problem.
here what the code looks like:
basicly i tested it with a custom skin (here named "test") for the spark button class, here what it looks like, but like i said its the unedited pure auto-generated flex code when defining a new skin for the spark button class
next we have our custom component named "container" like
and finaly we put that into the main application like:
now if you try that, you'll see that the custom spark button component within this container is not clickable. however, the standard s:button component IS clickable, and i dunno why.
如果 conB 是 conA 的子级，那么我认为将鼠标悬停在 conB 上不会触发 conA 上的鼠标移出。相同的基本事件逻辑应该仍然有效......
If conB is a child of conA, then I would think mousing over conB would not trigger a mouseout on conA. The same basic event logic should still work...
好吧，我不完全确定我理解您的场景...查看代码可能会有所帮助，但我知道如果您在某个元素上有皮肤并且您希望该元素包含另一个元素，则皮肤需要具有以下
内容 ： contentGroup 是一个神奇的 ID，让皮肤知道嵌套在皮肤对象中的所有内容（换句话说，皮肤所应用的对象）都没有被皮肤本身覆盖。深度是 z-index，“contentGroup”组的深度需要高于皮肤中其他任何内容。希望这有帮助。
Well I'm not totally sure I understand your scenario...seeing the code would probably help, but I know if you have a skin on an element and you want that element to contain another element, the skin needs to have this:
The contentGroup is something of a magic ID for skins to know that everything you nest in the skin's object (in other words, what the skin is being applied to) is not covered by the skin itself. Depth is the z-index, and the depth of the "contentGroup" group needs to be higher than anything else in the skin. Hope this helps.