Problem with multiple event handling in JQuery
- by Greg
Hi everyone,
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.hide(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);
}
});
