Остановка управления AppBar, отображающаяся по правому клику в WinJS

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

После долгих исследований, я обнаружил, что лучшим вариантом для себя было позволить панели приложений показывать естественным образом и отображать/скрывать команды.

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