Detect when container and child elements lose focus with JQuery

Question

I wish to determine when an HTML element and it's children lose focus when the user clicks away from the element. Eg:

<div id="boxA">
  <ul>
    <li>x</li>
    <li>y</li>
    <li>z</li>
  </ul>
</div>
<div id="boxB">
...
</div>

At the moment I have:

$("#boxA").live('blur', function() { hideFunction();  });

However, this does not work. If I click any element within Box A, it loses focus, but I only want it to happen when Box B is clicked or anywhere else on the page.

Edit & Solution

I found this solution on Stack Overflow. It works for me:

Use jQuery to hide a DIV when the user clicks outside of it

How can you *click away* from `
` element? This is not a form field. — VisioN, Nov 19 '12 at 15:10

score 3 · Answer 1 · answered May 21 '15 at 18:27

You could try listening on the focusout event and then checking if the current element with focus is a child of your container, like this:

$('#boxA').on('focusout', function (e) {
    setTimeout(function () { // needed because nothing has focus during 'focusout'
        if ($(':focus').closest('#boxA').length <= 0) {
            hideFunction();
        }
    }, 0);
});

score 2 · Answer 2 · answered Nov 19 '12 at 15:13

Try giving your div a tabindex attribute:

<div id="boxA" tabindex="0">
  <ul>
    <li>x</li>
    <li>y</li>
    <li>z</li>
  </ul>
</div>
<div id="boxB" tabindex="1">
...
</div>

From the docs:

In recent browser versions, the [focus] event can be extended to include all element types by explicitly setting the element's tabindex property. An element can gain focus via keyboard commands, such as the Tab key, or by mouse clicks on the element.

score 0 · Answer 3 · answered Nov 19 '12 at 15:15

0

Try this and tell me if it worked:

$("body").not("#boxA, #boxA ul li").live('focus', function(){ hideFunction(); });

answered Nov 19 '12 at 15:15

Dimitris Damilos

2,363
5
23
46

That is not an answer, this should be a comment against the question. – Ben Everard Nov 19 '12 at 15:20
2

Why is that? I offering an alternative that has worked for me. – Dimitris Damilos Nov 19 '12 at 15:23
Your answer makes you sound like you haven't tried it yourself. If you reword it to something like "This worked for me" it's less misleading. – Gyuri Dec 04 '20 at 17:59

score 0 · Answer 4 · edited May 16 '16 at 14:02

0

Maybe something along these lines:

$('#boxA, #boxA > *').focusout(function () {
if ($(document.activeElement).closest('#boxA').length == 0){
    alert("not focused");
}
});

http://jsfiddle.net/AjT9j/3/

edited May 16 '16 at 14:02

Flavien Volken

19,196
12
100
133

answered Nov 19 '12 at 15:30

Taff

231
1
13

score -1 · Answer 5 · edited May 23 '17 at 10:29

-1

As this answer says, any element with a tabindex can receive focus, perhaps that's your answer.

Which HTML elements can receive focus?

edited May 23 '17 at 10:29

Community

1
1

answered Nov 19 '12 at 15:13

Ben Everard

13,652
14
67
96

Detect when container and child elements lose focus with JQuery

5 Answers5