停止在 WinJS 中右键单击时显示 AppBar 控件答案

【问题标题】：Stopping AppBar control showing on right click in WinJS停止在 WinJS 中右键单击时显示 AppBar 控件
【发布时间】：2015-01-19 10:06:07
【问题描述】：

我试图仅在用户从列表视图中选择项目时显示App Bar。我已经使用 appBar.show() 和 appBar.hide() 方法显示了应用栏，但它不是唯一一次可以显示。

当我右键单击页面并且没有选择任何内容时，应用栏仍然显示。如何停止显示？

【问题讨论】：

标签： windows-store-apps winjs appbar

【解决方案1】：

经过大量研究，我发现对自己来说最好的选择是让应用栏自然显示并显示/隐藏命令。

<div id="appBar"
     data-win-control="WinJS.UI.AppBar"
     data-win-options="{placement:'bottom', layout:'commands'}">
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'switchTradeDirection',
        type:'button',
        label:'Switch Direction',
        section:'selection'}"></button>
    <button data-win-control="WinJS.UI.AppBarCommand"
            data-win-options="{id:'secondary1',
        type:'button',
        label:'Secondary1',
        section:'selection'}"></button>
    <div data-win-control="WinJS.UI.AppBarCommand"
         data-win-options="{ id: 'list',
     extraClass:'multiSelect',
     type: 'content',
     label:'List',
     section: 'selection'}">
        <select class="options">
            <option>Option1</option>
            <option>Option2</option>
            <option>Option3</option>
            <option>Option4</option>
        </select>
    </div>
</div>

在js文件中：

var appBarDiv = document.getElementById('appBar');
var appBar = appBarDiv.winControl;
if (selectedCount == 2) {
    appBar.showCommands(appBarDiv.querySelectorAll('.multiSelect'));
    appBar.sticky = true;
    appBar.show();
} else {
    appBar.hide();
    appBar.hideCommands(appBarDiv.querySelectorAll('.multiSelect'));
    appBar.sticky = false;
}

【讨论】：

【解决方案2】：

我在我的免费电子书Programming Windows Store Apps with HTML, CSS, and JavaScript (2nd edition) 的应用栏部分（第 480 页）中回答了这个问题：

提示要防止出现应用/导航栏，您可以执行以下两项操作之一事物。首先，为了防止出现应用栏或导航栏（对于任何手势），将控件的 disabled 属性设置为 true。其次，如果您想阻止它，例如，右键单击特定元素（例如画布），听上下文菜单（右键单击）该元素的事件并调用处理程序中的 eventArgs.preventDefault()。

【讨论】：