CODEWITHSUNDEEP
jqueryblur
Matt Coady
Matt Coady

Reputation: 3856

jQuery blur only if mouse is not inside another element

Here's what I have:

        $('#mini-panel-quick_menu .panel-col-last').mouseout(function(){
            $('#edit-search-block-form--2').blur(function(){
                $('#mini-panel-quick_menu .panel-col-last').removeClass('on');
                $('#mini-panel-quick_menu .panel-col-last').addClass('off');
                $( '#block-search-form' ).removeClass( "open" );
            });
        })

I want the blur function to happen but only if your mouse is not inside the ".panel-col-last" element.

Upvotes: 0

Views: 457

Answers (1)

josh3736
josh3736

Reputation: 144912

First, you probably want mouseleave rather than mouseout.

mouseout fires even if the cursor has moved into a child element, where mouseleave only fires when the cursor is entirely outside of your element.

You should set a flag that tracks whether the mouse is inside of your element, and check if from the blur handler:

var mouseIsIn;
$('#mini-panel-quick_menu .panel-col-last').hover(function() {
    mouseIsIn = true;
}, function() {
    mouseIsIn = false;
});

$('#edit-search-block-form--2').blur(function(){
    if (!mouseIsIn) {
        $('#mini-panel-quick_menu .panel-col-last').removeClass('on');
        $('#mini-panel-quick_menu .panel-col-last').addClass('off');
        $( '#block-search-form' ).removeClass( "open" );
    }
});

Upvotes: 4

Related Questions