Menu: Use event delegation for mouseover/out events, instead of binding to menu items directly

This commit is contained in:
jzaefferer 2010-10-28 18:11:55 +02:00
parent 0746f99115
commit 6b3eead894

43
ui/jquery.ui.menu.js vendored
View File

@ -23,7 +23,7 @@ $.widget("ui.menu", {
"aria-activedescendant": "ui-active-menuitem" "aria-activedescendant": "ui-active-menuitem"
}) })
.bind("click.menu", function( event ) { .bind("click.menu", function( event ) {
if (self.options.disabled) { if ( self.options.disabled ) {
return false; return false;
} }
if ( !$( event.target ).closest( ".ui-menu-item a" ).length ) { if ( !$( event.target ).closest( ".ui-menu-item a" ).length ) {
@ -32,7 +32,25 @@ $.widget("ui.menu", {
// temporary // temporary
event.preventDefault(); event.preventDefault();
self.select( event ); self.select( event );
}); })
.bind("mouseover.menu", function( event ) {
if ( self.options.disabled ) {
return;
}
var target = $( event.target ).closest( ".ui-menu-item" );
if ( target.length && target.parent()[0] === self.element[0] ) {
self.activate( event, target );
}
})
.bind("mouseout.menu", function( event ) {
if ( self.options.disabled ) {
return;
}
var target = $( event.target ).closest( ".ui-menu-item" );
if ( target.length && target.parent()[0] === self.element[0] ) {
self.deactivate( event );
}
});;
this.refresh(); this.refresh();
if (!this.options.input) { if (!this.options.input) {
@ -91,8 +109,6 @@ $.widget("ui.menu", {
}, },
refresh: function() { refresh: function() {
var self = this;
// don't refresh list items that are already adapted // don't refresh list items that are already adapted
var items = this.element.children("li:not(.ui-menu-item):has(a)") var items = this.element.children("li:not(.ui-menu-item):has(a)")
.addClass("ui-menu-item") .addClass("ui-menu-item")
@ -100,20 +116,7 @@ $.widget("ui.menu", {
items.children("a") items.children("a")
.addClass("ui-corner-all") .addClass("ui-corner-all")
.attr("tabIndex", -1) .attr("tabIndex", -1);
// mouseenter doesn't work with event delegation
.bind("mouseenter.menu", function( event ) {
if (self.options.disabled) {
return;
}
self.activate( event, $(this).parent() );
})
.bind("mouseleave.menu", function() {
if (self.options.disabled) {
return;
}
self.deactivate();
});
}, },
activate: function( event, item ) { activate: function( event, item ) {
@ -136,13 +139,13 @@ $.widget("ui.menu", {
this._trigger("focus", event, { item: item }); this._trigger("focus", event, { item: item });
}, },
deactivate: function() { deactivate: function(event) {
if (!this.active) { return; } if (!this.active) { return; }
this.active.children("a") this.active.children("a")
.removeClass("ui-state-hover") .removeClass("ui-state-hover")
.removeAttr("id"); .removeAttr("id");
this._trigger("blur"); this._trigger("blur", event);
this.active = null; this.active = null;
}, },