Search code examples
jqueryjquery-focusout

focusout but only if not focussed into another element


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?


Solution

  • 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.