爲什麼不覆蓋「goog.ui.Control.handleMouseOver（）」做什麼？

Question

當用戶將鼠標懸停在按鈕上時，我試圖將一個類添加到goog.ui.Button子類的實例中。

爲此，我推翻handleMouseOver：

/** 
* Handles mouseover events. 
* @param {goog.events.BrowserEvent} e Mouse event to handle. 
* @override 
*/ 
myapp.ui.Button.prototype.handleMouseOver = function(e) { 
    goog.base(this, 'handleMouseOver', e); 
    goog.dom.classes.add(this.getElement(), 'button-hover-state'); 
}; 

然而，當我懸停在按鈕上方，類「按鈕懸停狀態」不被添加到該按鈕。爲什麼不？ Chrome控制檯不會發布任何錯誤或警告。

我可以聽一個事件並作出響應而不是重寫handleMouseOver，但是不應該重寫此函數來改變鼠標進入元素時發生了什麼？

Answer 1

您的方法myapp.ui.Button.prototype.handleMouseOver沒有做任何事情的原因是因爲鼠標事件未被分派。

goog.ui.Button使用的默認渲染器是goog.ui.NativeButtonRenderer。 goog.ui.NativeButtonRenderer.prototype.createDom調用goog.ui.NativeButtonRenderer.prototype.setUpNativeButton_的方法，這反過來，調用：

button.setHandleMouseEvents(false); 

有幾個你可以用它來實現鼠標事件的方法。

使用默認按鈕渲染並覆蓋goog.ui.Component.prototype.render

/** 
* Renders the button. 
* 
* @param {Element=} opt_parentElement Optional parent element to render the 
* component into. 
* @override 
*/ 
myapp.ui.Button.prototype.render = function(opt_parentElement) { 
    goog.base(this, 'render', opt_parentElement); 
    this.setHandleMouseEvents(true); 
}; 

使用不同的默認渲染器如goog.ui.ButtonRenderer

/** 
* My custom button. 
* 
* @param {goog.ui.ControlContent} content Text caption or existing DOM 
*  structure to display as the button's caption. 
* @param {goog.ui.ButtonRenderer=} opt_renderer Renderer used to render or 
*  decorate the button; defaults to {@link goog.ui.NativeButtonRenderer}. 
* @param {goog.dom.DomHelper=} opt_domHelper Optional DOM hepler, used for 
*  document interaction. 
* @constructor 
*/ 
myapp.ui.Button = function(content, opt_renderer, opt_domHelper) { 
    goog.base(this, content, 
     opt_renderer || goog.ui.ButtonRenderer.getInstance(), opt_domHelper); 
}; 
goog.inherits(myapp.ui.Button, goog.ui.Button); 

當使用goog.ui.ButtonRenderer，CSS類goog-button-hover被自動添加到按鈕時鼠標懸停在按鈕上並在鼠標離開按鈕時被移除。