1

I'm developing an element group and want to trigger some functionality when an elements' focusout event triggers.

But I have to monitor how the focusout happened, which cause the focus out.

Assume the focusout is bind for element A. if user click on the element B the focusout should call the function_B, if user click on the element C the focusout should call the function_C. And elements B,C should not be inside element A.

pseudo code : 

$( element_A ).focusout(function() {

   element_user_interaction = wether user clicks on element_B or element_C
   if(element_user_interaction == element_B){
        function_B();
   }else if(element_user_interaction == element_C){
        function_C();
   }

});

I found a code from SO. see the accepted answer

$(document).mouseup(function (e)
{
    var container = $("YOUR CONTAINER SELECTOR");

    if (!container.is(e.target) // if the target of the click isn't the container...
        && container.has(e.target).length === 0) // ... nor a descendant of the container
    {
        container.hide();
    }
});

I tried but could not change the above code to match for the pseudo code.

Community
  • 1
  • 1
prime
  • 14,464
  • 14
  • 99
  • 131

1 Answers1

2

You should use the property of the event relatedTarget. 

$( element_A ).focusout(function(e) {
   if(element_B.is(e.relatedTarget)){
        function_B();
   }else if(element_C.is(e.relatedTarget)){
        function_C();
   }
});
  • For onfocus and onfocusin events, the related element is the element that LOST focus.
  • For onblur and onfocusout events, the related element is the element that GOT focus.

Warning: This property is null if you click on something other than form elements i.e. image or text. Which is logical but could be confusing.

See more details at http://www.w3schools.com/jsref/event_focus_relatedtarget.asp

Stepashka
  • 2,648
  • 20
  • 23
  • World is full of surprises :-) – Stepashka Nov 04 '15 at 09:36
  • why i'm keep getting `null` for the `e.relatedTarget` – prime Nov 04 '15 at 09:36
  • @prime Works as expected here: http://jsfiddle.net/3ku72Lnh/ So provide MCVE replicating your issue – A. Wolff Nov 04 '15 at 09:38
  • it produces null if you click outside of any form elements. Which is logical. It only works on form elements as far as I see. – Stepashka Nov 04 '15 at 09:41
  • ah thanks for the fiddle. But try click out side an input tag. then it preints `null` any hack for that. :) – prime Nov 04 '15 at 09:42
  • Updated my answer with that warning. Don't forget to mark my answer as correct one ;-) – Stepashka Nov 04 '15 at 09:45
  • @prime The workaround could be to make all non focusable elements focusable, e.g using: `$('*').filter(':not(:input)').attr('tabindex', -1);` But this would be better using pseudo jq UI selector `:focusable`. Here is an implementation e.g: http://jsfiddle.net/e1gkLzqz/ – A. Wolff Nov 04 '15 at 09:55
  • @Stepashka is there any way to make this work for non form elements as well. ? – prime Nov 04 '15 at 09:55
  • @A.Wolff : this jsfiddle you gave not working when we open and test it in firefox. why is that. – prime Nov 04 '15 at 11:19
  • @prime *Apparently*, that's a bug on FF regarding event relatedTarget https://bugzilla.mozilla.org/show_bug.cgi?id=962251 Still not fixed... So my best bet would be to use a timeout and check for activeElement instead: http://jsfiddle.net/e1gkLzqz/1/ – A. Wolff Nov 04 '15 at 11:32