Problem with multiple event handling in jQuery
I have a strange jQuery problem with multiple event handlers. What I'm trying to achieve is this:
- User selects some text on the page
- If the selection is not empty - show a context menu
- If user clicks somewhere else - the context menu should disappear
I'm having troubles with the above i.e. sometimes the context menu appears correctly, sometimes it appears and disappears straight after user makes a selection. Please help. See the relevant parts of my code below. Also when user selects a paragraph or a word by double clicking - context menu appears and quickly disappears again.
var ContextMenu = {
...
show: function(e) {
var z = this;
if (!this.shown) {
if (this.contextMenu) {
this.contextMenu.css({
left: e.pageX,
top: e.pageY
}).slideDown('fast');
this.shown = true;
}
var hideHandler = function() {
z.开发者_如何学Pythonhide(this);
};
$(document.body).bind("click", hideHandler);
}
},
hide: function(hideHandler) {
if (this.contextMenu && this.shown) {
this.contextMenu.slideUp('fast');
this.shown = false;
$(document.body).unbind("click", hideHandler);
}
}
};
// Context menu display logic
$(document.body).bind("mousedown mouseup", function(e) {
if ((window.getSelection().toString() != "") && (!ContextMenu.shown)) {
ContextMenu.show(e);
}
});
See if binding the event only to mouseup
helps:
$(document.body).bind("mouseup", function(e) {
if ((window.getSelection().toString() != "") && (!ContextMenu.shown)) {
ContextMenu.show(e);
}
});
From what I unserstand you don't need to bind it to the mousedown
event.
I think, if you bind it to the mousedown
event and the user makes a selection by dragging the mouse (and pressing the button), your context menu is shown (mousedown
) and the click
handler is bound to the document while the mouse button is still pressed. Thus, after releasing the mouse button (as of finishing the selection), a click
is performed and the previously bound click
handler gets executed, making the menu disappear again.
I could be wrong though ;)
精彩评论