Question

I have two statements. What I am trying to do is when someone clicks on #area_a then hide then entire #area_b div without activating the focusout for the #area_b_textbox. But I’ve tried different code (which I am not including here because it is incorrect and want to get your suggestions) and what is happening is it is activating the focusout everytime I click on the #area_a div.

JQuery base actions

$("#area_a").click(function() { $("#area_b").hide(); });

$("#area_b_textbox").focusout(function() {$("#area_b_error").show();});

HTML:

<div id="area_a"></div>

<div id="area_b">
  <input id="area_b_textbox">
  <div id="area_b_error"></div>
</div>

Thanks!

Answer 1

You could hack around the problem with a timer. Timers usually smell bad but I think it is your safest bet here. If you try using hover or other mouse events you might run into trouble with keyboard navigation and activation or the lack of “hoverish” events on touch interfaces (and we can’t pretend those don’t exist anymore).

Something like this:

var timer_kludge = {
    start: function(fn) {
        this.id = setTimeout(fn, 200);
    },
    stop: function() {
        if(this.id)
            clearTimeout(this.id);
        this.id = null;
    },
    id: null
};

$('#area_a').click(function() {
    timer_kludge.stop();
    $('#out').append('<p>click</p>');
});
$('#area_b_textbox').focusout(function() {
    timer_kludge.start(function() {
        $('#out').append('<p>textarea focusout</p>');
    });
});
$('#area_b_textbox').focusin(function() {
    timer_kludge.stop();
});

Demo: http://jsfiddle.net/ambiguous/s8kw8/1/

You’d want to play with the 200 timeout a bit to see what works best in your circumstances.