mouseentermouseleave.js revision 680f13616a493c7bf3a794982e07d10abd9763b3
402N/A/**
402N/A * <p>Adds subscription and delegation support for mouseenter and mouseleave
402N/A * events. Unlike mouseover and mouseout, these events aren't fired from child
402N/A * elements of a subscribed node.</p>
402N/A *
402N/A * <p>This avoids receiving three mouseover notifications from a setup like</p>
402N/A *
402N/A * <pre><code>div#container > p > a[href]</code></pre>
402N/A *
402N/A * <p>where</p>
402N/A *
402N/A * <pre><code>Y.one('#container').on('mouseover', callback)</code></pre>
402N/A *
402N/A * <p>When the mouse moves over the link, one mouseover event is fired from
402N/A * #container, then when the mouse moves over the p, another mouseover event is
402N/A * fired and bubbles to #container, causing a second notification, and finally
402N/A * when the mouse moves over the link, a third mouseover event is fired and
402N/A * bubbles to #container for a third notification.</p>
402N/A *
402N/A * <p>By contrast, using mouseenter instead of mouseover, the callback would be
402N/A * executed only once when the mouse moves over #container.</p>
402N/A *
402N/A * @module event
402N/A * @submodule event-mouseenter
402N/A */
402N/Afunction notify(e, notifier) {
402N/A var current = e.currentTarget,
402N/A related = e.relatedTarget;
402N/A
402N/A if (current !== related && !current.contains(related)) {
402N/A notifier.fire(e);
402N/A }
402N/A}
402N/A
402N/Avar config = {
402N/A proxyType: "mouseover",
on: function (node, sub, notifier) {
sub.onHandle = node.on(this.proxyType, notify, null, notifier);
},
detach: function (node, sub) {
sub.onHandle.detach();
},
delegate: function (node, sub, notifier, filter) {
sub.delegateHandle =
Y.delegate(this.proxyType, notify, node, filter, null, notifier);
},
detachDelegate: function (node, sub) {
sub.delegateHandle.detach();
}
};
Y.Event.define("mouseenter", config, true);
Y.Event.define("mouseleave", Y.merge(config, { proxyType: "mouseout" }), true);