为什么不覆盖“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会自动添加到按钮中，当鼠标离开按钮时会将其删除。