Firefox Addon SDK onMouseover事件的按钮 [英] Firefox Addon SDK onMouseover Event for a Button

问题描述

随着多进程的Firefox的到来，我决定修改我的插件。这是一个建立在XUL上的工具栏插件。现在我想使用Addon SDK来构建它。

旧的XUL覆盖允许按钮的 onMouseOver 事件。但新的插件SDK只有一个点击的侦听器。

我怎样才能得到一个onMouseOver（悬停）事件的工具栏按钮？

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

我找到了这个，并且正在努力获得它，但也许有更好的方法？

这是什么到目前为止：

  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）; 
 
 
 
 $ / code $ / pre 
 
 
但它还没找到 #MyButton 。
解决方案
这是一个完整的例子这个。实际上有两个函数，一个用于鼠标悬停，一个用于鼠标悬停。如果您使用鼠标悬停来更改按钮的图标，则需要鼠标将其更改回正常状态。 
 
 
  const {browserWindows} =要求（ SDK /窗）; 
 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函数（状态）{
，32：./ icon-32.png，64：./icon-64.png}，
 console.log（My Button was clicked）; 
} 
}）; 
 
 
 //为控件创建鼠标悬停效果
 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，真正）; 
}; 
 
 
函数myMouseOverFunction（）{
 console.log（miding over ...）; 
 
函数myMouseOutFunction（）{
 console.log（mould out ...）; 
 
 
 
 $ b //将事件添加到浏览器窗口
（让browserWindows的w）{
 exports.MouseOver（mybutton ，viewFor（w），myMouseOverFunction）; 
 exports.MouseOut（mybutton，viewFor（w），onMouseOutFunction）; 
} 
  
 
With the coming of multi-process Firefox, I have decided to revamp my addon.  It is a toolbar addon that was built on XUL.  Now I want to build it using the Addon SDK.


The old XUL overlay allowed for onMouseOver events for buttons.  But the new addon SDK only has the one listener for click.

How can I get an onMouseOver (Hover) event for a toolbar button?

Maybe there is some way to add css (:hover) to the button element?

I found this, and am working on getting it in order, but maybe there's a better way?

Here is what I have so far:
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");
        }
    }
 }
But it does not yet find #MyButton.
解决方案
Here is a complete example of how to do this.  There are two functions, actually, one for mouseover and one for mouseout.  If you change the icon of a button using mouseover, you need mouseout to change it back to normal.
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 );    
}


                        
这篇关于Firefox Addon SDK onMouseover事件的按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！