Flex 窗口 - 单击空白区域

Posted 2023-02-16

【中文标题】Flex 窗口 - 单击空白区域

【英文标题】：Flex window - clicking on empty space

【发布时间】：2016-12-30 08:41:41

【问题描述】：

如提供的图片中所述排列有 flex 图标：

每当用户单击空白区域（标记为红色）中的某个位置时，都会单击图标（标记为“A”）。这是常见的弹性问题吗？知道如何解决这个问题吗？

编辑：我在这里粘贴了所有相关代码。有问题的是 Flex 的 TileList

xmlns:mx="http://www.adobe.com/2006/mxml"

private var systemArray : ArrayCollection = new ArrayCollection;

private function init() : void

    //adding icons
    systemArray.addItem(name: "Some Name1",
                             state: "classHeaderListState", toolTip: "",
                             icon: new AssetLib().classHeaderIcon32,
                             id: "entityClassesForm");
    systemArray.addItem(name: "Some Name2",
                             state: "resourceListState", toolTip: "",
                             icon: new AssetLib().resourceIcon32, id: "resourcesForm");



private function onClickList(e : Event) : void
   
    var index : int;
    index = TileList(e.currentTarget).selectedIndex;
    if (index == -1)
        return;
    currentState = systemArray.getItemAt(index).state;
    (this.parent as Pod).title = systemArray.getItemAt(index).name;



<mx:State name="MenuState"
          enterState="(this.parent as Pod).title='System Tools';udfButtonPanel.visible = false;">
    <mx:AddChild position="lastChild">
        <mx:TileList id="list"
                     
                     themeColor="#ffffff"
                     
                     dataProvider=" systemArray "
                     itemClick="onClickList(event)"
                     borderStyle="none"
                     />

    </mx:AddChild>
</mx:State>

【问题讨论】：

包含图片是一个好的开始，但为了得到答案，您需要包含您正在使用的代码、这些图标是什么（它们是什么 as3 类/mxml 标签）以及您如何使用添加点击功能。

"这是一个常见的弹性问题吗？"不，不是。

我不太明白你的问题，但是当用户点击它时，你可以在图标下添加一个带有相关 MouseEvent 的可点击区域，不是吗？最好的问候。

你是对的。我提供了代码。谢谢

【参考方案1】：

我也有同样的问题。似乎单击 flex 留下的空白空间会将单击事件传播到您在其周围的 flex 上的复选框或元素。当 flexbox 占据所有宽度但在开始时对齐它的内容时会发生这种情况。

有一些解决方法，最简单（也是最丑陋）的是使用width: fit-content。

如果你的父母没有特定的风格，你也可以使用display: inline-flex。