I want to trigger the focusout when the user is not focusing on the ENTIRE form element. But it shouldn't trigger when the user clicks on any of the form's inner elements like in this case the text field or the button. But it's being triggered regardless even though the event is bound to the entire form. How to resolve this?

/

HTML:

<form>
    <input type="text" />
    <button type="button">Click Me</button>
</form>

jQuery:

$('form').on('focusout', function() {
   alert('focus out');    
});

I want to trigger the focusout when the user is not focusing on the ENTIRE form element. But it shouldn't trigger when the user clicks on any of the form's inner elements like in this case the text field or the button. But it's being triggered regardless even though the event is bound to the entire form. How to resolve this?

http://jsfiddle/exutahfa/

HTML:

<form>
    <input type="text" />
    <button type="button">Click Me</button>
</form>

jQuery:

$('form').on('focusout', function() {
   alert('focus out');    
});

• javascript
• jquery

• didn't understand what you trying to achieve? – TechnoCrat Commented Mar 18, 2015 at 18:07
• I think you just need to stop the event from happening: jsfiddle/exutahfa/1 – BuddhistBeast Commented Mar 18, 2015 at 18:10
• Well, when you click on another element the focusout event gets triggered since the element you where focusing looses focus... It depends on your use case but I would give all the inputs a css class and listen to focusout on that class. – Frank Adrian Commented Mar 18, 2015 at 18:10
• The issue here is that OP is clicking the submit button and that is technically not focused out of the form. – BuddhistBeast Commented Mar 18, 2015 at 18:11
• 1 Well that's what focusout does. When you click on input field form is gaining focus and then for clicking button, you're leaving input field which is essentially leaving the focus on the form, that's why event handler is fired. The issue is that you shouldn't try to register focusout event on form because a form on its own renders nothing the user can observe. All the input elements in the form are the ones which can attain and leave focus – Arkantos Commented Mar 18, 2015 at 18:20

3 Answers 3

This happens because you are in-fact not focusing on the form, but rather on one of its child elements (input or button in your case). The focusout (or blur) event will bubble up to the form but is not triggered by it directly.

You might want to:

1. capture blur events on form inputs
2. see if another child element of the same form received focus

$('form').on('focusout', function () {
    var $elem = $(this);

    // let the browser set focus on the newly clicked elem before check
    setTimeout(function () {
        if (!$elem.find(':focus').length) {
            alert('focus out');
        }
    }, 0);
});

Working example on JSFiddle.

See how the form doesn't receive any focus in the linked fiddle: it it did, it would have been highlighted with a red border (see CSS definitions).

The focusout event doesn't work like that.

From the jQuery docs:

This method is a shortcut for .on( "focusout", handler ) when passed arguments, and .trigger( "focusout" ) when no arguments are passed.

The focusout event is sent to an element when it, or any element inside of it, loses focus. This is distinct from the blur event in that it supports detecting the loss of focus on descendant elements (in other words, it supports event bubbling).

This event will likely be used together with the focusin event.

The reason the event in your fiddle is firing is because it detects the loss of focus on descendant elements. In general, I don't think the form element itself can even have focus, so calling $('form').blur(function() { alert('focus lost') }); will not do what you want it to do either. You can, however, use .blur() on the inner elements on the form and have it work the same way if you are targeting specific elements and want them all to do distinct things.

As it stands, a form can't have focus, but its descendants can, and that is why you are running into the issue. If you are trying to call an event that changes the form when it is selected, then try adding a class to it the first time the user focuses on one of the input fields in the form, and then when they click anything else on the page that is not in the form, remove the class from the form.

You have to apply the focus out specifically to the elements you want it to work on and not all the form. Example:

HTML:

<form>
    <input id="focus" type="text" />  
    <button type="button">Click Me</button>
</form>

JavaScript:

$( "#focus" ).on('focusout', function() {
   alert('focus out');    
});