Return immediately and not execute chained mouseout event if mousedown was triggered inside mouseover event

Ask Time：2012-05-03T04:14:34 Author：bob_cobb

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.

Author:bob_cobb，eproduced under the CC 4.0 BY-SA copyright license with a link to the original source and this disclaimer.
Link to original article：https://stackoverflow.com/questions/10420964/return-immediately-and-not-execute-chained-mouseout-event-if-mousedown-was-trigg

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

Return immediately and not execute chained mouseout event if mousedown was triggered inside mouseover event