javascript - 弹出控件将自己隐藏在 ListView 项调用事件中

Question

如果我在 iteminvoked 事件上调用 flyout 显示函数。弹出窗口会在几分之一秒内自动隐藏。

这是我的代码

<div id="listView"
     class="win-selectionstylefilled"
     data-win-control="WinJS.UI.ListView"
     data-win-options="{
        itemDataSource: Teoco.ListView.data.dataSource,
        itemTemplate: select('.settingsTemplate'),
        selectionMode: 'single',
        tapBehavior: 'directSelect',
        oniteminvoked : name.ListView.selectionChanged,
        layout: { type: WinJS.UI.ListLayout }
}">
</div>
<div id="contactFlyout" data-win-control="WinJS.UI.Flyout">

</div>




 Settings.SettingsModules = (new function(){
        function selectionEventHandler(evt){
            var settingsList = evt.target;
            evt.detail.itemPromise.then(function (invokedItem) {
                var flyout = document.getElementById("contactFlyout")
                flyout.winControl.show(settingsList);
            });

        }
        this.init = function(modules){
            var selectionChangeHandler = WinJS.UI.eventHandler(selectionEventHandler);
            WinJS.Namespace.define("name.ListView", {
                data: new WinJS.Binding.List(modules),
                selectionChanged:selectionChangeHandler
            });

        };
    });


     $(document).ready(function(){
        Settings.SettingsModules.init([{title : "Application"},{title : "Agent"}]);
         WinJS.UI.processAll();

     });

Answer 1

感谢您提出这个问题。我为你调查了这个。看来 ListView 正在以编程方式窃取指针向上(或其他一些事件)的焦点，这会导致 Flyout 轻微消失。这是一个错误，我已经 re-opened a similar issue在我们的 GitHub 上进行跟踪。

与此同时，这里有一个简单的解决方法:

listview.winControl.addEventListener('iteminvoked', function (e) {
    setTimeout(function () { flyout.winControl.show(e.target) }, 0);
});

请告诉我这是否能解决您的问题!