focusout but only if not focussed into another element

Question

I have the following jQuery:

$(document).ready(function() 
{ 
    $("#Button1").click(function () {
        $("#divCompany1").slideToggle("fast");
    });

    $("#Button1").focusout(function () {
        $("#divCompany1").slideUp("fast");
    });

    $("#divCompany1").focusout(function () {

        $("#divCompany1").slideUp("fast");

    });

});

The following is a description of what I want to happen:

• If the user focuses on Button1 but then loses focus I want divCompany1 to slide
• If the user focuses on divCompany1 but then loses focus I want divCompany1 to slide up only
• The exception to the above is if Button1 loses focus but divCompany1 gains it at the same time I want nothing to happen

This basically allows the user to go between Button1 and divCompany1 without divCompany1 sliding.

I've searched around for a while and not found anything of use, I'm thinking theres likely a need for a flag or something.

Any ideas?

Answer 1

Okay I seem to have solved it:

$("#Button1").click(function () {
        $("#divCompany1").slideToggle("fast");
        $("#<%=lstBoxCompany.ClientID%>").focus();
    });

    $("#divCompany1").focusout(function () {
        $("#divCompany1").slideUp("fast");
    });

Instead of worrying about focusout for Button1 I simply set the focus to the element I wanted to user to go to (divCompany1) and only after this focus has gone do I hide it.

Works as intended.

Answer 2

This question says how to detect if an element has focus: Using jQuery to test if an input has focus

Then all you need to do is:

$("#Button1").focusout(function () {
    if (!$("#divCompany1").is(":focus")) {
        $("#divCompany1").slideUp("fast");
    }
});