Question

I tried to call a function when a mouse goes up above a subclass of goog.ui.Control:

/** @override */
myapp.MyButton.prototype.handleMouseUp =
    function(e) {
  goog.base(this, 'handleMouseUp', e);
  alert('Woof!');
}

However, when I click on my button, not alert shows up. Why not? Doesn’t handleMouseUp get called when my mouse is raised after a click?

Answer 1

The source code for goog.ui.Control contains the following comment:

All controls dispatch SHOW, HIDE, ENTER, LEAVE, and ACTION events on show, hide, mouseover, mouseout, and user action, respectively.

To see exactly which events are dispatched for various actions, take a look at the goog.ui.Control demo, which has a live event log.

In order to enable addition transition events, goog.ui.Control includes the following method:

/**
 * Enables or disables transition events for the given state(s).  Controls
 * handle state transitions internally by default, and only dispatch state
 * transition events if explicitly requested to do so by calling this method.
 * @param {number} states Bit mask of {@link goog.ui.Component.State}s for
 *     which transition events should be enabled or disabled.
 * @param {boolean} enable Whether transition events should be enabled.
 */
goog.ui.Control.prototype.setDispatchTransitionEvents = function(states,
    enable) {
  this.statesWithTransitionEvents_ = enable ?
      this.statesWithTransitionEvents_ | states :
      this.statesWithTransitionEvents_ & ~states;
};

For example, you could do the following to enable transition events for all states.

var myButton = new myapp.MyButton();
myButton.setDispatchTransitionEvents(goog.ui.Component.State.ALL, true);

Now when the mouse button is down the activate event will be dispatched and upon releasing the mouse button the deactivate event will be dispatched.

See the goog.ui.Button demo (in particular, the combined toggle buttons near the bottom of the page).