Not sure how to go about this, but basically I wrote a tooltip plugin which removes the tooltips on either mouseout
or mousedown
.
If a mousedown
event is triggered, it'll remove $that.parent()
which is fine, and this removes the tooltip, but then if the user also triggers the mouseout event (which they will because the mouseover
and mouseout
events are currently chained), it will then delete another DOM element which I don't want. So essentially I'm wondering if this is possible:
$that.on('mouseover', function() {
// If this event is triggered within the mouseover event, don't run the chained mouseout event
$that.on('mousedown', function() {
$that.parent().next().fadeOut(100).remove();
return false;
});
}).mouseout(function() {
// If they clicked above, don't run this
$that.parent().next().fadeOut(100).remove();
});
As far as I know, without using a global variable it's hard to access a clicked
boolean set inside of that mousedown
event e.g:
$that.on('mouseover', function() {
clicked = false;
// If this event is triggered within the mouseover event, don't run the chained mouseout event
$that.on('mousedown', function() {
clicked = true;
$that.parent().next().fadeOut(100).remove();
return false;
});
}).mouseout(function() {
// If they clicked above, don't run this
if (clicked) {
$that.parent().next().fadeOut(100).remove();
}
});
Any thoughts on how to construct this elegantly?
EDIT: The elements in $that.parent().next()
are just a <div class="js-tooltip"><span>Tooltip text</span></div>
But this should be irrelevant as I'd like to just know if it's possible to return from that mouseover
function if the mousedown
was triggered without using a global variable.
Roko C. Buljan :
You don't need the mouseover.\n\n$that.on('mouseleave mouseup', function(e) {\n if( e.type === 'mouseleave'){\n // do the mouseleave stuff\n }else{\n // do the mouseup stuff\n }\n});\n\n\n\n\nAs you said, if the elements is dynamically created you should use:\n\n$(document).on('mouseleave mouseup', $that, function(e) {",
2012-05-02T20:32:16