How to exclude Id from focusout

Question

With Jquery, focusout is just called when you click anywhere out of the focused area when "focusout" is set.

How do I exclude some id(s) from activiting the "focusout" function. ?

e.g here.

You have an input text field ( id="A")that hides some div on focus and shows that very div when it's out of focus, so but now it obviously will show the div when you click anywhere out of this ("#A") input field.

Question is, how do you set some id(maybe a select field(Id="B" next to it), not to fire off the "focusout" function. Hope it makes sense.

Do you mean the new ID you're clicking on, or the ID you're leaving? — Barmar, Jun 28 '13 at 20:17
Any id that will be clicked which is not the originator of the "on focus" event. I don't think the code will enlighten you @Tim, it's gonna add more mist instead, lets just use layman's terms, "English". — Blessing Thinker, Jun 28 '13 at 20:58

score 1 · Answer 1 · answered Jun 28 '13 at 21:29

1

Try using relatedTarget event property:

$('#id').focusout (function (e) {

    if (e.relatedTarget && e.relatedTarget.id === 'dontFocusOut') {
        return;
    }
    //do your thing

});

answered Jun 28 '13 at 21:29

Assaf Shemesh

2,078
2
18
19

I'd love to also try this one since unbind just kills the function in a way that after clicking the unbinded div, "focusout" just dies. , but this related target doesn't run. – Blessing Thinker Jun 28 '13 at 23:29
What do you mean by "doesn't run"? Note that `event.relatedTarget` might be null if you your related target is not part of your document. In any other case it should be the element receiving focus. – Assaf Shemesh Jun 29 '13 at 06:46

score 0 · Answer 2 · answered Jun 28 '13 at 21:29

0

You can unbind the focusout when you click on a div. This may return some expected results, and at some point in your code you'll probably want to rebind it. See here for an example: http://jsfiddle.net/hdCFA/

$("input").on("focus", function() {
    $(".hidden").show();
});
$("input").on("focusout",function() {
    $(".hidden").hide();
});

$(".clickable").on("mousedown", function() { 
    $("input").unbind("focusout"); 
});

HTML:

<input />
<div class="hidden">Hidden div</div>
<div class="clickable">Click me</div>

CSS:

.clickable { background:blue; }
.hidden {
    display:none;
}

answered Jun 28 '13 at 21:29

Tim Wasson

3,606
16
16

Good one, easy and straight forward. Thanks. – Blessing Thinker Jun 28 '13 at 23:21
Lol, so this doesn't unbind only the div, but just kills that function completely, from the unbinded Id you can't click somewhere else and have focusout continue working. – Blessing Thinker Jun 28 '13 at 23:31
Right, as I mentioned, you're going to have to rebind at some point in your code. Without knowing the application it's hard to say when to rebind, but this should give you a good head start on a solution. – Tim Wasson Jun 28 '13 at 23:47
Try this one: http://jsfiddle.net/hdCFA/1/ It uses a few variables and `e.preventDefault();` to, hopefully, accomplish what you're after. – Tim Wasson Jun 29 '13 at 02:44
Actually, you may not even need the variables. Those were leftover from another solution I was trying. http://jsfiddle.net/hdCFA/3/ – Tim Wasson Jun 29 '13 at 02:46

How to exclude Id from focusout

2 Answers2

Linked