Почему переопределение goog.ui.Control.handleMouseOver() ничего не делает?

Я пытаюсь добавить класс к экземпляру подкласса 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, но не должно ли переопределение этой функции изменить то, что происходит, когда мышь входит в элемент?


google-closure-library google-closure
person dangerChihuahua007    schedule 26.08.2012    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Причина, по которой ваш метод 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 автоматически добавляется к кнопке при наведении указателя мыши на кнопку и удаляется, когда мышь оставляет кнопку.

person Christopher Peisert    schedule 26.08.2012