Why must return false in the function mouseDown/mouseUp/mouseMove at ui.core.js
hi all,
I encountered a problem when I put the combobox plugin in the
draggable div (the draggable is enabled by using ui.draggable.js). The
list of the combobox can't hide when click on the div. The list should
be hide when mouse down event occur.
After further investigated, I found the function mouseDown in the file
ui.core.js will return false when dragging on the div, and then jQuery
will stop bubbling the mouse down event, that the list in combobox
can't hide.
I'd like to know the reason why jQuery UI development team prefer to
return false to prevent the event bubbling in draggable plugin.
here are the snapshot of the mouseDown function in ui.core.js
mouseDown: function(e) {
// we may have missed mouseup (out of window)
(this._mouseStarted && this.mouseUp(e));
this._mouseDownEvent = e;
var self = this,
btnIsLeft = (e.which == 1),
elIsCancel = (typeof this.options.cancel == "string" ? $
(e.target).parents().add(e.target).filter(this.options.cancel).length :
false);
if (!btnIsLeft || elIsCancel || !this.mouseCapture(e)) {
return true;
}
this._mouseDelayMet = !this.options.delay;
if (!this._mouseDelayMet) {
this._mouseDelayTimer = setTimeout(function() {
self._mouseDelayMet = true;
}, this.options.delay);
}
if (this.mouseDistanceMet(e) && this.mouseDelayMet(e)) {
this._mouseStarted = (this.mouseStart(e) !== false);
if (!this._mouseStarted) {
e.preventDefault();
return true;
}
}
// these delegates are required to keep context
this._mouseMoveDelegate = function(e) {
return self.mouseMove(e);
};
this._mouseUpDelegate = function(e) {
return self.mouseUp(e);
};
$(document)
.bind('mousemove.'+this.widgetName, this._mouseMoveDelegate)
.bind('mouseup.'+this.widgetName, this._mouseUpDelegate);
return false;
},