Conflicts of blur and submit/click events

Question

I have two items

item1 is textbox

item2 is submit button

Now item1 has blur event in jquery. In that blur event I have validation and based on that validation if it fails user will have confirmation message.

So if user press yes he can proceed futher

if user press no that textbox will be blank and need to enter detail again.

So now my issue is that if user enter detail in item1 and directly click on item2, button's submit event rejected and item1's blur event called. So first time is rejected and user have to press 2nd time on button(This is the issue).

So how to know in item1's blur event if user click on item2 than I can proceed further with triggering item2's click event.

If you do not know $item2 you can try this: http://stackoverflow.com/a/28482710/3265637 — Andriy, Feb 12 '15 at 16:38

Anton Boritskiy · Accepted Answer · 2014-05-05T12:20:52.233

4

Consider this code

var $item1 = $('#item1');
var $item2 = $('#item2');
$item1.on('blur', function (oEvent) {
    if ($item2.is(oEvent.relatedTarget)) {
        // your blur is caused by click on $item2 a.k.a submit button
    } else {
        // your blur is caused by smth else
    }
});

It checks where your focus was moved and you can add some specific boolean flag to use later on in your submit handler or maybe change your validation somehow.

Please note that blur event is event of loosing focus, focus can go away not only because of clicks, but also because of tab-navigation for example.

UPDATE:
added a jsfiddle http://jsfiddle.net/DbjQc/ Try focusing the text input and then clicking somewhere else. After that try focusing the text input again and then click the submit button - you will see how behavior changes.

edited May 05 '14 at 12:20

answered May 05 '14 at 11:40

Anton Boritskiy

1,539
3
21
37

`oEvent.relatedTarget` always returns null. what should be root cause? – commit May 05 '14 at 12:06
@commit, let me check that – Anton Boritskiy May 05 '14 at 12:12
@commit, I've just checked it in jsfiddle and it works - please find the link in my answer – Anton Boritskiy May 05 '14 at 12:21
Anton, great solution! relatedTarget is a cool property of event, didn't know about it. Thanks! – Prosto Trader May 05 '14 at 12:34
@ProstoTrader, it also works with some other events, like mouseover/mouseout. But always check browser compatibility, this property is tricky. – Anton Boritskiy May 05 '14 at 12:38
emm, what would be relatedTarget in mouseOver event? currently focused element? Or element which fired mouseout? – Prosto Trader May 05 '14 at 12:44
1

@ProstoTrader, the object which just lost mouse, if applicable. see https://developer.mozilla.org/en-US/docs/Web/Reference/Events/mouseover But this topic is not relevant to this question or answer. – Anton Boritskiy May 05 '14 at 12:59

Conflicts of blur and submit/click events

1 Answers1