1

One div has a bounded focusout event. OnFocusOut(method name) event some code is getting executed. But i want which element causes focusout event. If e.relatedTarget is child elements of that div then don't execute code from OnFocusOut method.

I tried e.relatedTarget(working on google chrome), but this variable does not work with firefox(does not support). So i want some alternate solution for e.relatedTarget which supports for all browsers.

Edit

jsfiddle

As displays in output,

Container21 is contentEditable div which has focusout event binded.

i want if user clicks on other than container22 then doSomthing()

One restriction is i can not add click event on remaining elements.

Kaustubh Khare
  • 3,280
  • 2
  • 32
  • 48
  • 1
    e.target with condition? – guradio Apr 07 '16 at 06:51
  • @guradio e.target giving same div on which i binded focusout event, even if i click from outside of the div. – Kaustubh Khare Apr 07 '16 at 06:53
  • Can you share executable demo/snippet or [JSFiddle](https://jsfiddle.net/) ? – Rayon Apr 07 '16 at 06:53
  • May be you are looking for `e.stopPropogation()` – Rayon Apr 07 '16 at 06:55
  • if the target element Container22 can have focus, you could try checking if it has focus in your event. or add a focus-class to it on click and remove that class when the user clicks Container21, then check for that class. – KWeiss Apr 07 '16 at 09:56
  • @KWeiss Each time target value is same i.e. container21, but actual focus is present on another element. – Kaustubh Khare Apr 07 '16 at 10:01
  • @KWeiss their are too many containers present in my actual code, so i can not add click event on all containers. I given smallest example in fiddle. – Kaustubh Khare Apr 07 '16 at 10:16
  • so you have a lot of different Container21s with different Container22s for each of them? – KWeiss Apr 07 '16 at 11:14
  • this might help you: http://stackoverflow.com/questions/497094/how-do-i-find-out-which-dom-element-has-the-focus – KWeiss Apr 07 '16 at 11:25
  • @KWeiss no their is only one container21 and container22, but their are other many containers on which if i clicked then, focusout method should doSomthing. and if i clicked on container22 then focusout method shouldn't doSomthing. – Kaustubh Khare Apr 07 '16 at 13:14

1 Answers1

1

If your Container22 is an element that can have focus, you can check if it has focus in your blur event:

$('#container21').blur(function(){
    // timeout because focus does not switch immediately
    setTimeout(function(){
        if (document.activeElement === document.getElementById('container22')) {
            // your logic here: container22 has focus
        } else {
            // your logic here: container22 does not have focus
        }
    }, 60);
});

If Container22 cannot have focus, you can give it a class instead:

$('#container22').click(function(){
    $(this).addClass('fake-focus');
});

You remove the class when Container21 gains focus:

$('#container21').focus(function(){
    $('#container22').removeClass('fake-focus');
});

And you check for the class when Container21 loses focus - if Container22 has the class, that means the user clicked it to focus out. We need a timeout again, because the click event will happen after focus is lost.

$('#container21').blur(function(){
    // timeout because focus does not switch immediately
    setTimeout(function(){
        if ($('#container22').hasClass('fake-focus')) {
            // your logic here: container22 was clicked
        } else {
            // your logic here: container22 was not clicked
        }
    }, 60);
});
KWeiss
  • 2,954
  • 3
  • 21
  • 37