停止在WinJS中右鍵單擊顯示AppBar控件

Question

當用戶從列表視圖中選擇一個項目時，我試圖只顯示一個App Bar。我已經通過使用appBar.show（）和appBar.hide（）方法顯示了應用程序欄，但它不是唯一可以顯示的時間。

當我右鍵單擊頁面並沒有選擇任何內容時，應用欄仍然顯示。我怎樣才能阻止它顯示？

Answer 1

我回答這個問題在我的免費電子書，Programming Windows Store Apps with HTML, CSS, and JavaScript (2nd edition)，在應用欄部分（頁480）：

提示要防止出現應用程序/導航欄，你可以做兩件 事情之一。首先，爲了防止應用程序欄或導航欄出現在所有 （對於任何手勢），請將控件的禁用屬性設置爲true。第二，如果您想要阻止某個元素（例如畫布）的右鍵單擊，請收聽該元素的上下文菜單 （右鍵單擊）事件，並調用 eventArgs.preventDefault（）在您的處理程序。

Answer 2

經過大量研究後，我發現自己最好的選擇是允許應用欄自然顯示並顯示/隱藏命令。

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

：

<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文件