CODEWITHSUNDEEP
javascriptjquery
EverTheLearner
EverTheLearner

Reputation: 7200

If else statement for javascript click event

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!

Upvotes: 2

Views: 1961

Answers (4)

mu is too short
mu is too short

Reputation: 434665

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.

Upvotes: 1

meo
meo

Reputation: 31249

this is not possible since you loose the focus automatically when you click somewhere else...

What you need to do is to unbind the focusout event on hover of the #area_a and rebind it later on...

$("#area_a").click(function() { 
   $("#area_b").hide()
}),hover(
  function(){
    $("#area_b_textbox").unbind("focusout")
  },
  function(){
    $("#area_b_textbox").focusout(function() {$("#area_b_error").show();});
  }
)

PS: what is your ultimate goal here?

Upvotes: 1

Ilia G
Ilia G

Reputation: 10211

Why not just add a flag to ignore next focusout (blur?) event.

ignoreNextFocus = false;
$("#area_a").click(function() { ignoreNextFocus=true; $("#area_b").hide(); });
$("#area_b_textbox").focusout(function() { if(!ignoreNextFocus)$("#area_b_error").show();ignoreNextFocus=false;});

On that note setting the flag on click event might be too late. If it is the case, try mousedown event.

Upvotes: 1

Keith.Abramo
Keith.Abramo

Reputation: 6955

I'm not sure this is possible since by definition the focus has to leave the #area_b_textbox if the user is going to click a button.

Upvotes: 0

Related Questions