Stopping AppBar control showing on right click in WinJS

Question

I'm trying to only show an App Bar when a user selects an item from a list view. I've got the app bar showing by using the appBar.show() and appBar.hide() methods but its not the only time it can be shown.

When I right click the page and don't have anything selected, the app bar still shows. How can I stop it showing?

Answer 1

I answer this in my free ebook, Programming Windows Store Apps with HTML, CSS, and JavaScript (2nd edition), in the app bar section (page 480):

Tip To prevent the app/nav bar from appearing, you can do one of two things. First, to prevent an app bar or nav bar from appearing at all (for any gesture), set the control’s disabled property to true. Second, if you want to prevent it for, say, a right-click on a particular element (such as a canvas), listen to the contextmenu (right click) event for that element and call eventArgs.preventDefault() within your handler.

Answer 2

After much researching about, i found that the best option for myself was to allow the app bar to show naturally and show/hide the commands instead.

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

in the js file:

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