CODEWITHSUNDEEP
javascriptjquery
commit
commit

Reputation: 4807

Conflicts of blur and submit/click events

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.

Upvotes: 1

Views: 2434

Answers (1)

Anton Boritskiy
Anton Boritskiy

Reputation: 1569

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.

Upvotes: 4

Related Questions