How to get which element causes blur event for a div

Kaustubh Khare

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.

KWeiss

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);
});

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

how to get element value from focus-blur event in javascript

From Dev

How to blur(css) div without blur child element

From Dev

Polymer element blur event

From Dev

Blur Body except div element

From Dev

jQuery - How to destroy an event which is attached to an element?

From Dev

How to get which element was clicked?

From Dev

when removing a child element I get an error that it may have already been removed in a "blur" event

From Dev

How to know which is the top element showing in div

From Dev

How to get all element from div block which contains type=radio?

From Dev

Get the element itself which cause the event in jquery function

From Dev

Attempting to show a <div> element with the blur function

From Dev

Attempting to show a <div> element with the blur function

From Dev

missing click event because blur event hiddes element

From Dev

missing click event because blur event hiddes element

From Dev

How to get id of element which called function

From Dev

How to get element within accordion event in jQuery

From Dev

How to get data element of checkbox on change event

From Dev

How to get source element from AJAX event?

From Dev

How to get the clicked element in Bootstrap collapse event?

From Dev

how to get click event of row element of jstree?

From Dev

How to get the key TAB event on an input element?

From Dev

how to get click event of li element in jquery?

From Dev

How to get element assoicated to onClick event

From Dev

How to get the selected element in jQuery event delegation?

From Dev

How to get data element of checkbox on change event

From Dev

How to get the event source from calling element

From Dev

Jquery - How to check which element was clicked with event target?

From Dev

How to add click event to an element with JQuery which is created by serverside

From Dev

how to unbind click event for element which has "onclick=xxx"?

Related Related

  1. 1

    how to get element value from focus-blur event in javascript

  2. 2

    How to blur(css) div without blur child element

  3. 3

    Polymer element blur event

  4. 4

    Blur Body except div element

  5. 5

    jQuery - How to destroy an event which is attached to an element?

  6. 6

    How to get which element was clicked?

  7. 7

    when removing a child element I get an error that it may have already been removed in a "blur" event

  8. 8

    How to know which is the top element showing in div

  9. 9

    How to get all element from div block which contains type=radio?

  10. 10

    Get the element itself which cause the event in jquery function

  11. 11

    Attempting to show a <div> element with the blur function

  12. 12

    Attempting to show a <div> element with the blur function

  13. 13

    missing click event because blur event hiddes element

  14. 14

    missing click event because blur event hiddes element

  15. 15

    How to get id of element which called function

  16. 16

    How to get element within accordion event in jQuery

  17. 17

    How to get data element of checkbox on change event

  18. 18

    How to get source element from AJAX event?

  19. 19

    How to get the clicked element in Bootstrap collapse event?

  20. 20

    how to get click event of row element of jstree?

  21. 21

    How to get the key TAB event on an input element?

  22. 22

    how to get click event of li element in jquery?

  23. 23

    How to get element assoicated to onClick event

  24. 24

    How to get the selected element in jQuery event delegation?

  25. 25

    How to get data element of checkbox on change event

  26. 26

    How to get the event source from calling element

  27. 27

    Jquery - How to check which element was clicked with event target?

  28. 28

    How to add click event to an element with JQuery which is created by serverside

  29. 29

    how to unbind click event for element which has "onclick=xxx"?

HotTag

Archive