Question

I am developing my first firefox extension so I created a menu-button element and menu items.
Exactly like the FireBug button, I would like an event to be triggered when clicking on the main button, but also when clicking on a menu item. The problem is that when I click on the arrow next to the main button to display the menu items the main event is triggered. So my question is:

How do I differentiate the main button (the menu-button) and the arrow displaying the menu?

Here is my code generating the button:

function addToolbarButton() {
var document = mediator.getMostRecentWindow('navigator:browser').document;      
var navBar = document.getElementById('nav-bar');
if (!navBar) {
    return;
};

//main button
var btn = document.createElement('toolbarbutton');  
btn.setAttribute('id', 'reportButton'); 
btn.setAttribute('type', 'menu-button');  
btn.setAttribute('class', 'toolbarbutton-1'); 
btn.setAttribute('image', data.url('img/BookmarkKitchen.png'));
btn.setAttribute('orient', 'horizontal');
btn.setAttribute('label', 'Report');
btn.addEventListener('click', function() {
    console.log("this=" + this.id); 
    event.stopPropagation();
    }
, false);


//menu popup
var menupopup = document.createElement('menupopup');
menupopup.setAttribute('id', 'menupopup');
menupopup.addEventListener('click', function(event) {
    console.log("this=" + this.id);   
    event.stopPropagation();
}
, false);

//menu items
var menuitem1 = document.createElement('menuitem');
menuitem1.setAttribute('id', 'menuitem1');
menuitem1.setAttribute('label', 'Test1');
menuitem1.setAttribute('class', 'menuitem-iconic');
menuitem1.addEventListener('click', function(event) {
    console.log("this=" + this.id);  
    event.stopPropagation();
}
, false);


menupopup.appendChild(menuitem1);
btn.appendChild(menupopup);
navBar.appendChild(btn);



}

When I click on the main button, the console will write “this=reportButton”. This is normal but when I click on the arrow next to the main button, the console will also write “this=reportButton”. That means if I want to access the menu, the main event will be triggered. The only way I found to prevent this, is to press the button on the arrow, wait for the menu to show up and release it on a menu Item. This is not very user friendly and Firebug doesn’t have this problem…

I hope I was clear enough. Thanks for answering this 🙂

Answer 1

Don’t use the click event – in XUL it really means a mouse click. So if the user triggers a button by other means (e.g. keyboard), the click event will not be triggered. You should use the command event instead – and it has the additional advantage that it won’t fire if the dropdown arrow is clicked.