Cancelling blur handler based on item that was clicked

Hi again you wonderful people!

My issue this time is testing if a mouseClick has occurred with a blur statement.

I have a global solution where every input field is validated on BLUR. Inside this event, I need to test if a certain element has been clicked (i.e. the helpBubble), if it has, I don't want the validation to oc开发者_运维技巧cur, however, if that specific element has not been clicked, the validation still needs to happen.

Any help would be overwhelmingly appreciated!!

The blur event of the previously-focused element will fire before the click event on the newly-focused element. As such, you cannot prevent validation onblur based on what you are moving to unless you add a timeout. For example:

var validationTimer;
$('#myform input').blur(function(){
  var blurred = $(this);
  validationTimer = setTimeout(function(){
    validationTimer = null;
    // Perform Validation on 'blurred'.
  },100);
});

$('.helpbubble').click(function(){
  if (validationTimer){
    clearTimeout(validationTimer);
    validationTimer = null;
  }
});

This will wait 100ms after the blur before performing validation, but if a click happens within that timeframe (it will happen almost immediately) it will be cancelled before it occurs.

Edit: Here's a working example: http://jsfiddle.net/9SzDP/