Flyout 将自己隐藏在列表视图项调用的事件中

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);
});

如果这能解决您的问题，请告诉我！

Flyout 将自己隐藏在列表视图项调用的事件中

Flyout hide himself on list view iteminvoked event

javascript

jquery

winjs