If else statement for javascript click event

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!

Set focus back in the handler; best you can do-if you click on something, you're gonna lose focus from something else. — Dave Newton
– Dave Newton, Commented Oct 22, 2011 at 20:47

mu is too short · Accepted Answer · 2011-10-22 21:10:53Z

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.

edited Oct 22, 2011 at 21:10

answered Oct 22, 2011 at 21:02

mu is too short

436k71 gold badges863 silver badges822 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

meo Over a year ago

how about disabled people, they could use a long time to reach the button or what if area_a is on a totally different position on the site... i don't think this is a better solution.

mu is too short Over a year ago

@meo: The timer is started when the <textarea> loses focus so there is no problem, the <textarea> will have focus until they "click" the link (and then the click handler will be triggered before the timer runs out) or they "click" outside the textarea (and then it should activate the focusout handler).

mu is too short Over a year ago

@meo: Good call thinking about accessibility issues though, a lot of accessibility issues apply to touch (and text) based interfaces as well as interfaces for the disabled.

Ilia G · Accepted Answer · 2011-10-22 20:49:59Z

1

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.

answered Oct 22, 2011 at 20:49

Ilia G

10.2k3 gold badges43 silver badges61 bronze badges

Comments

meo · Accepted Answer · 2011-10-22 20:54:17Z

1

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?

edited Oct 22, 2011 at 20:54

answered Oct 22, 2011 at 20:47

meo

31.3k20 gold badges90 silver badges124 bronze badges

3 Comments

Dave Newton Over a year ago

Does that work? You'll already have lost focus on the click, no?

meo Over a year ago

oh you are right. Need to think of something else. I have changed it to hover

meo Over a year ago

they fire the hover event also.. Ever wondered why dropdown navigation system based on hover still work on the ipad or iphone? ;) But i see you point...

Keith.Abramo · Accepted Answer · 2011-10-22 20:46:01Z

0

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.

answered Oct 22, 2011 at 20:46

Keith.Abramo

6,9652 gold badges34 silver badges46 bronze badges

Collectives™ on Stack Overflow

If else statement for javascript click event

4 Answers 4

3 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related