Toolbar context menu showing inside toolbarbutton's xul panel

问题

I have a toolbarbutton that when clicked, shows a panel. When i right click the panel i'm getting the following:

This is the same context menu that shows when i click on the main toolbar or even the toolbarbuttons.

The xul is:

<toolbarpalette id="BrowserToolbarPalette">
  <toolbarbutton id="testToolbarIcon"
           image="chrome://myext/content/images/aicon.png"
           type="panel"
           class="toolbarbutton-1 chromeclass-toolbar-additional">
    <panel id="testPanel"
         type="arrow"
         level="parent">
      <vbox id="testbox" align="top" width="200" height="200">
        <label value="Test Label" />
        <textbox></textbox>
      </vbox>
    </panel>
  </toolbarbutton>        
</toolbarpalette>

Any idea on how to stop this behavior from passing to the panel?

回答1:

Adding an click event listener to the panel and .preventDefault() and/or .stopPropagation() should do the trick, if memory served right.

Another way is simply not to use a type="panel" button, put the panel somewhere else (a popupset) and open the panel from js using .openPopup(). To get the button state right, you need to do a button.open = true when the popup is shown, and revert that once it is hidden again (at least that is what the download-indicator button does).

回答2:

I have

<toolbarbutton id="search-button" label="Search" type="panel" oncommand="signage.onMenuItemCommand(event);" onclick="signage.emptyFn(event);" ondblclick="signage.emptyFn(event);"></toolbarbutton>

where

signage.emptyFn: function (event) {
    event.preventDefault();
    //event.stopPropagation();
},

And works fine!

来源：https://stackoverflow.com/questions/18553627/toolbar-context-menu-showing-inside-toolbarbuttons-xul-panel