FireFox addon, Menu button events
===

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

