Question

Lets say there is a textbox and a button. On the click of button a function is executed, and on the focusout of textbox, the button is clicked. What I wanna know is, is there a way, I can determine that weather the user clicked the button, or it was triggered by focusout event of textbox, so that I may do some custom work in the click event, if it was triggered by focusout of textbox?

I could write some code, but I don’t even have any idea where to begin with, I know the jQuery event and event.which property, but I wonder if it/they could be useful in this situation?

Answer 1

This depends on how you’re triggering the function from the textarea blur event, if you’re simply triggering the click event using the following approach:

$('#btn').click(
    function(e){
        buttonActivation(e);
    });

$('#txt').blur(
    function(e){
        $('#btn').click();
    });

Then I’d suggest evaluating the originalEvent object to see what the original event was (if there was no originalEvent then the function was called by a programmatic click event, with jQuery; whereas if the originalEvent.type evaluates to click then the button must have been clicked.

function buttonActivation(e) {
    if (!e) {
        return false;
    }
    else {
        var oEvent = e.originalEvent;
        if (oEvent === undefined) {
            console.log('Programmatic event');
        }
        else if (oEvent.type == 'click') {
            console.log('User-initiated event');
        }
    }
}

JS Fiddle demo.

If, however, you’re using something like the following (simply calling the same function from a different place):

$('#btn').click(
    function(e){
        buttonActivation(e);
    });

$('#txt').blur(
    function(e){
        buttonActivation(e);
    });

Then I’d recommend either directly assessing e.target or e.type:

function buttonActivation(e) {
    if (!e) {
        return false;
    }
    else {
        var oEvent = e.type;
        if (oEvent === 'blur') {
            console.log('Programmatically-triggered event, on ' + oEvent);
        }
        else if (oEvent == 'click') {
            console.log('User-initiated ' + oEvent + ' event');
        }
    }
}

JS Fiddle demo.