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');
};

ただし、ボタンにカーソルを合わせると、クラス '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 クラスgoog-button-hoverは、マウスがボタンの上に置かれるとボタンに自動的に追加され、マウスがボタンから離れると削除されます。

于 2012-08-26T16:53:12.540 に答える