WinJS 浮出控件不断关闭 - 无法单击控件

Question

我正在编写一个 Win 通用应用程序 （JS） 并实现了一个浮出控件。浮出控件可通过工具栏中的按钮访问。浮出控件的代码 -

<button data-win-control="WinJS.UI.Command" data-win-options="{
        id:'cmdChangeCategory',
        label:'Change Category',
        section:'selection',
        type:'flyout',
        icon:'video',
        tooltip:'Change Category',
        flyout:'changeCatFlyout'}"></button>

浮出控件div -

<div id="changeCatFlyout" data-win-control="WinJS.UI.Flyout">
    <label for="ddlChangeCategory" style="display:block;clear:both;margin-top:10px">Select Category</label>
    <select id="ddlCategoryChange"></select>
    <button id="btnChangeCategory" title="Change" style="display:block;clear:both;margin-top:10px">Change</button>
</div>

单击按钮时会显示浮出控件，并且看起来正常，问题是浮出控件内的控件无法与之交互（下拉列表通过 JS 填充）。每当我尝试单击下拉列表或按钮时，浮出控件都会关闭。我尝试使浮出控件div 成为身体的直接子级，因为我在其他地方将其视为可能的解决方案。

有什么想法吗???

我应该在 WinJS 游乐场工作中添加尝试这个 - 让我感到沮丧！！

Answer 1

浮出控件应该是 document.body 的直接子项。确保飞出未嵌套在其他div 中。

Answer 2

我不知道

这是否与您的问题相同，但我想我会发表评论，以防其他人遇到与我相同的问题。

基本上，我放在一起的这个小提琴类似于我的代码： https://jsfiddle.net/reko91/yg0rs4xc/13/

注意 css ：

#wholeContainer {
  position: fixed;
}

由于此wholeContainer是所有内容的容器，因此position:fixed;干扰浮出控件中元素的单击事件。我将其更改为 absolute ，它再次完美运行:)

更新的小提琴：https://jsfiddle.net/reko91/yg0rs4xc/14/

希望能帮助某人:)

Answer 3

看看THETODD的这个答案。

基本上问题是你需要在父固定DIV之外定义你的data-win-control="WinJS.UI.Menu"部分。 似乎您不能定位：FIXED一个DIV，然后在其中定位：FIXED另一个，并期望浮出控件适用于所有浏览器（在IE中工作.. ha）。 WinJS.UI.Menu也在尝试定位：fixed。

所以。。。

<div id="aMenuBar" style="position:fixed">
  <button id="settingsButton" class="win-button">Settings</button>
</div>
<!-- this part cannot be in the fixed div above -->
<div id="settingsFlyout" data-win-control="WinJS.UI.Menu">
  <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:alwaysSaveMenuItem',label:'Always Save Drafts',type:'toggle',selected:'true'}"></button>
</div>