1

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，但是不应该覆盖这个函数来改变鼠标进入元素时会发生什么？

4

1 回答 1

2

您的方法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 类会自动添加到按钮中，当鼠标离开按钮时，CSS 类会被移除。goog-button-hover

于 2012-08-26T16:53:12.540 回答