jQuery focusout for entire div and children

Question

I have a div that I am creating dynamically via jQuery with some links/buttons in it. When this div loses focus I need to remove it. This part I can do ok.

However, right now I have the focusout event on the wrapper for the div and when I click on a button inside the div, the wrapper loses focus to the child and my event gets fired. Checking if the element clicked is a child of the wrapper I can do, but since the wrapper no longer has focus, my event will not fire again to remove the div.

I have also tried .blur, but this doesn't work any better.

What is the best way to do this?

Please post your code, then *optionally* provide a fiddle . – Frédéric Hamidi Mar 12 '13 at 18:48 — Frédéric Hamidi, Mar 12 '13 at 18:48

score 21 · Answer 1 · edited Jun 27 '20 at 08:04

21

A way of solving this with plain javascript is using the relatedTarget given in the event argument:

element.addEventListener('focusout', function(event) {
    if (element.contains(event.relatedTarget)) {
        // don't react to this
        return;
    }
    // do something
});

edited Jun 27 '20 at 08:04

Jens

8,423
9
58
78

answered Oct 16 '17 at 07:34

Stefan Hessler

211
2
2

I prefer to use `this` instead of `element` inside the function. – Gleb Kemarsky Sep 18 '18 at 14:02

score 18 · Accepted Answer · answered Feb 12 '15 at 16:57

18

$("#yourDiv").focusout(function () {
   if ($(this).has(document.activeElement).length == 0) {
       // remove div
   }
});

$(this) = the div you're focusing out of.

document.activeElement = the element that is currently in focus.

$(this).has(document.activeElement) is simply checking if the active element is a child of your div

answered Feb 12 '15 at 16:57

Isaac

212
3
3

Thanks, works perfectly :) Other answer link is broken, couldn't check. – René Sackers Apr 17 '15 at 07:26
22

Didn't work for me since at this point the new element hasn't received focus yet so activeElement is body. – Bill Software Engineer Jan 10 '17 at 20:39
Awesome! didn't know bout this – James Cazzetta Jun 19 '17 at 12:28

score 1 · Answer 3 · answered Jan 24 '21 at 10:54

here is how I solved this for a menu using event.relatedTarget , :

$('#mapmenu  a.nolink').click(function (e) {//ul.lev-0 > li.expanded >
  $(this).closest('li').toggleClass('hovered');
  e.preventDefault();
  e.stopPropagation();
  return false;
});
$('#mapmenu  a.nolink').closest('li').focusout(function (e) {
  var ax = e.relatedTarget;
  var bx = $(ax).closest('ul');
  if ($(this).has(bx).length == 0) {
    $(this).removeClass('hovered');
  }
});

jQuery focusout for entire div and children

3 Answers3