Question

随着多进程Firefox的出现，我决定改进我的插件。它是一个基于XUL构建的工具栏插件。现在我想使用Addon SDK构建它。

旧的XUL叠加层允许按钮onMouseOver个事件。但是新的插件SDK只有click的一个监听器。

如何获取工具栏按钮的onMouseOver（Hover）事件？

也许有一些方法可以将css（：hover）添加到按钮元素中？

I found this，我正在努力使其有序，但也许有更好的方法？

这是我到目前为止所做的：

var {Cu, Cc, Ci} = require("chrome");
Cu.import('resource://gre/modules/Services.jsm');

 var aDOMWindow = Services.wm.getMostRecentWindow('navigator:browser');
 aDOMWindow.addEventListener('mouseover', onSpatMouseover, true);

 function onMyMouseover(event){
    if (event.target.nodeName == 'toolbarbutton'){
        console.log(event.explicitOriginalTarget.nodeName);
        if(event.currentTarget.nodeName == '#MyButton'){
             console.log("found the button");
        }
    }
 }

但它还没有找到#MyButton。

Answer 1

首先，您已收到的错误消息已告诉您如何使其正常工作。

但它不一定是你所需要的，通常sdk/view/core通过其3种方法之一提供对底层XUL元素的访问。

Answer 2

以下是如何执行此操作的完整示例。有两个功能，实际上，一个用于鼠标悬停，一个用于鼠标输出。如果使用鼠标悬停更改按钮的图标，则需要使用mouseout将其更改回正常状态。

const { browserWindows } = require("sdk/windows");
const { CustomizableUI } = require('resource:///modules/CustomizableUI.jsm');
const { viewFor } = require("sdk/view/core");
const { ActionButton } = require("sdk/ui/button/action");

var myButton = ActionButton({
    id: "mybutton",
    label: "My Button",
    icon: { "16": "./icon-16.png", "32":"./icon-32.png", "64": "./icon-64.png" },
    onClick: function(state) {
        console.log("My Button was clicked");
    }  
});


//create a mouseover effect for a control
exports.MouseOver = (whatbutton, whatwindow, whatfunction) =>{
    CustomizableUI.getWidget( viewFor(whatbutton).id ).forWindow(whatwindow).node.addEventListener('mouseover', whatfunction, true);
};
exports.MouseOut = (whatbutton, whatwindow, whatfunction) =>{
    CustomizableUI.getWidget( viewFor(whatbutton).id ).forWindow(whatwindow).node.addEventListener('mouseout', whatfunction, true);
};    


function myMouseOverFunction(){
  console.log("mousing over...");
}
function myMouseOutFunction(){
  console.log("mousing out...");
}



//add events to the browser window
for(let w of browserWindows){
    exports.MouseOver(mybutton, viewFor(w), myMouseOverFunction);   
    exports.MouseOut(mybutton, viewFor(w), onMouseOutFunction );    
}

按钮

2 个答案: