为什么不覆盖“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被自动添加到按钮时鼠标悬停在按钮上并在鼠标离开按钮时被移除。