1

我正在开发我的第一个 Firefox 扩展，所以我创建了一个菜单按钮元素和菜单项。就像 FireBug 按钮一样，我希望在单击主按钮时触发一个事件，而且在单击菜单项时也可以。问题是当我单击主按钮旁边的箭头以显示菜单项时，会触发主事件。所以我的问题是：

如何区分主按钮（菜单按钮）和显示菜单的箭头？

这是我生成按钮的代码：

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



}

当我单击主按钮时，控制台将写入“this=reportButton”。这是正常的，但是当我单击主按钮旁边的箭头时，控制台也会写“this=reportButton”。这意味着如果我想访问菜单，将触发主事件。我发现防止这种情况的唯一方法是按下箭头上的按钮，等待菜单显示并在菜单项上释放它。这不是非常用户友好，Firebug 没有这个问题......

我希望我足够清楚。感谢您回答这个问题:)

4

1 回答 1

1

不要使用该click事件——在 XUL 中它实际上意味着鼠标点击。因此，如果用户通过其他方式（例如键盘）触发按钮，click则不会触发该事件。您应该改用该command事件 - 它还有一个额外的优势，即如果单击下拉箭头，它不会触发。

于 2012-07-13T20:11:57.940 回答