4

I have a "parent div" containing a child box input type=number. When user clicks outside of input box I use blur or focusout event of parent div to use input values at some other place.

I also need to use $('inputbox').trigger('focus') at some place, which fires "parent div"'s blur event unwantedly and runs code on that event.

Please give a solution to stop this parent blur event on child's focus OR give a way to find whether focus is made by trigger('focus') on child element or by user clicking outside of parent div.

I need to fire parent Blur only when user clicks outside of it & not when focus is triggered through code.

Umesh K.
  • 311
  • 2
  • 6
  • 14

4 Answers4

2

with jquery you can make custom events very easily , something like:

$('inputbox').trigger('special-focus');

then you can wait for this event just like any other event:

$('div').on('special-focus' , function(){ ... } );

this will prevent your events from interfering with the built in ones.

I guess if you don't want to use that suggestion then do this in your click handler or your focus handler of the child

 .on('focus' , function(e){
    e.stopPropagation();
    e.preventDefault();
   /// the rest of your code ...
 });

this will stop the propagation of events to parent elements

Scott Selby
  • 9,420
  • 12
  • 57
  • 96
2

This worked perfect for me:

if (e.relatedTarget === null) ...
Andres Cabrera
  • 31
  • 2
1

What worked for me was checking the relatedTarget property of the eventObject object in the handler function.

$("#parentDiv").focusout(function (eventObject) {
    if (eventObject.relatedTarget.id === "childInputId")
        /// childInput is getting focus
    else
        /// childInput is not getting focus
});
Cody Stott
  • 484
  • 1
  • 7
  • 19
0

.on('blur',...) of parent fires before .on('focus' ,...) of child.
Anyways for a parent div containing child input box we can use
$('input').trigger('special-focus');
and then

  $("#form" ).on('special-focus', '.parentdiv' , function(event) {
          $("#form" ).off('blur', '.parentdiv');
          $(event.target).focus();
          $("#form" ).on('blur', '.parentdiv' , showValuesOnBlur);
     });


Now blur of parent will not fire on focus of child.
This worked for me. i.e. off & on the blur event of parent inside special-focus.
Thanks Scott Selby :)

Umesh K.
  • 311
  • 2
  • 6
  • 14
  • 2
    If you're not going to select my answer as the correct answer , then you may want to consider provider a complete answer of what you did to get this code working . Someone else visiting this page would not unserstand just throwing in a custom event there and not showing how it was triggered – Scott Selby Jan 19 '16 at 07:44
  • .on('focus' , function(e){ e.stopPropagation(); etc will not work here as parent blur fires first.. also working code contains on and off of blur event that's why I didn't mark your answer corrent mate but still it was useful to suggest custom events by you.Had I marked this correct ,developer would keep on trying e.stopPropagation(); which does not work here. – Umesh K. Jan 19 '16 at 07:58
  • I got that , that is fine , I just meant to write a complete answer ,and I wasn't telling you you had to either , I'm not the Stackoverflow boss, I was just saying you should consider. By complete I didn't mean mine was correct I just meant to fill in the parts you left out – Scott Selby Jan 19 '16 at 09:09
  • okay mate, also your answer gave a strong direction to work on. appreciable. – Umesh K. Jan 19 '16 at 09:23