Handle blur event of parent element fired by focus on child element and by clicking outside of child
Solution 1
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
Solution 2
This worked perfect for me:
if (e.relatedTarget === null) ...
Solution 3
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
});
![Umesh K.](https://i.stack.imgur.com/Qswko.jpg?s=256&g=1)
Umesh K.
Updated on August 21, 2022Comments
-
Umesh K. almost 2 years
I have a "parent div" containing a child box input
type=number
. When user clicks outside of input box I useblur
orfocusout
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. over 8 yearsthanks but still if I have to use .focus() to focus on input box and it is firing blur of parent .
-
Scott Selby over 8 yearsedited answer , added another solution that will work for you
-
Scott Selby over 8 yearsyou can attach to the click event , you might half to play with where to catch the event .
-
Umesh K. over 8 yearsThanks Scott...I have posted the solution as answer.
-
Scott Selby over 8 yearsIf 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
-
Umesh K. over 8 years.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.
-
Scott Selby over 8 yearsI 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
-
Umesh K. over 8 yearsokay mate, also your answer gave a strong direction to work on. appreciable.