Question

I am trying to improve the following script a little:

$(document).click(function(event) {
    $('.home.active').click();
    $('.home').removeClass("active");
});

This works, but it works when I don’t want it to work. For example, I have a textbox. If that textbox gets focus, the class should not be removed, but if anything else on the page is clicked, the class should be removed. So I tried the following, which does not work:

$(document).click(function(event) {
    if( $('#txtHomeSearch').focus() ) {
        // don't remove class
    } else {
        $('.home.active').click();
        $('.home').removeClass("active");
    }
});

This stops the class being remove altogether, no matter where I click, and the textbox always has focus.

Answer 1

You can use event.target to determine the id of the clicked element:

$(document).click(function(event) {
    if (event.target.id === "txtHomeSearch") {
        // Don't remove class.
    } else {
        $('.home.active').click();
        $('.home').removeClass("active");
    }
});