Caching the blur event using jQuery

Question

I need to do something when a blur event is fired from a text box.

The problem is the blur event is also fired when the user presses the "Enter" key and when the mouse is clicked somewhere else.

I need to do some specific action when the mouse is clicked somewhere else; how would I do it?

Answer 1

This might also help:

Set timer that delays the blur event action before it fires the button click event.

// Namespace for timer var setTimer = { timer: null }

    $('input,select').blur(function () {
        setTimer.timer = setTimeout(function () {
           functionCall();
        }, 1000);
    });

    $('input,select').focus(function () {
        setTimer.timer = setTimeout(function () {
            functionCall();
        }, 1000);
    });

    $("#btn").click(function () {
        clearTimeout(setTimer.timer);
        functionCall();
    });   

Answer 2

This may be a way:

<script src="http://code.jquery.com/jquery-1.4.4.js"></script>
<input id="txtbox" ><input>

<script>

$(document).click(function()
                    {
                      if($('#txtbox').data('blurred')==1)
                      {
                        $('#txtbox').data('blurred',0);
                        alert('blurred by click');
                      }
                    }
                  );

$('#txtbox').blur(function(e)
                  { var _this=this;$(_this).data('blurred',1);
                    setTimeout(function(){$(_this).data('blurred',0);} ,200);
                  }
                 ).unbind('click');

</script>

It uses a flag(named 'blurred', stored inside the input's data).

So if the blur-event fires, this flag is first set to 1 and a moment later set to 0(this moment should be enough for click to fire before). If click fires on document, it just checks this flag.