Take the 2-minute tour ×

I have a standard text input that has a blur event. The blur event should fire when anything in the document is clicked (other than the input AND <div id='show-anyways'></div>).

My problem is that I don't know how to add the <div id='show-anyways'></div> to negate the blur event function.

Hopefully I have explained myself well enough, I know it's kinda a weird situation. Please let me know if you need more info.

share|improve this question
show what you coded so far please. –  Dexter Huinda Jun 23 '12 at 22:36
You would need to either e.preventDefault, e.stopPropagation, or determine which was clicked and stop the bubbling before it hits the target. The design flaw I feel like is that you have a blur event handler on the DOM? Do I understand that right? –  Jared Farrish Jun 23 '12 at 22:40

3 Answers 3

up vote 7 down vote accepted

Use the event target to determine what is clicked. Following will track all clicks on document and not trigger blur() if element is the DIV or the Input.

var $input=$( '#MY-Input-ID');

   var $tgt=$(evt.target);
   if( !$tgt.is( '#show-anyways') && !$tgt.is($input) ){

It will not trigger on elements that have any preventPropogation set up.

share|improve this answer
I actually had to end up going with using $(document).click for my solution since the original input.blur event would not fire if the click/focus sequence was input -> #show-anyways -> document.click. Therefore, the event between #show-anyways and document.click would not trigger the input.blur event... –  sadmicrowave Jun 23 '12 at 23:23
Note: a good way to check for a click within a div and all of its children is to add && !$tgt.is($('*', $('#show-anyways'))) to the conditional statements within the click function above. –  garromark Jan 16 '13 at 10:11
@garromark that only checks descendents of the element... $tgt.closest('#show-anyways').length will check descendents and the element.. not sure why I didn't use that one –  charlietfl Jan 16 '13 at 12:21

could try adding some logic like?

var tester = e.target;
if ($(tester).attr('id') == 'show-anyways'){
return false;
else {
// do something?


this basically fires when the blur occurs, it checks what was clicked/targed and if it happens to be the show-anyways then it will return false and stop doing anything. but if its not show-anyways then it can do your blur event?

untested, but is this what you mean?

share|improve this answer
this is exactly what I mean, but e.target returns 'input' for me on the blur event...so I can't arrive at what your solution is... –  sadmicrowave Jun 23 '12 at 23:02
found it - the construct in the event is originalEvent.explicitOriginalTarget –  sadmicrowave Jun 23 '12 at 23:07
Sadly originalEvent.explicitOriginalTarget is Gecko only. –  Yogh Apr 3 at 9:44

UPDATE: had to completely rewrite my solution. The blur event handler is attached to the event that loses focus: if it was similar to mouseout event, we could know which element will get the focus, but there's no such luck. So we have to resort capturing .click events instead - and trigger some function based on it, instead of listening to blur events.

var inputIsBlurred = function() { 
   console.log('Run away!!!');
  var $target = $(e.target);
  if ($target.is('#some_input') // fired by an input - no special effects
      || $target.is('#show-anyways') // fired by 'show-anyways' div
      || $target.parents('#show-anyways').length > 0 // ... or its children
  ) {
      return true; // move along, nothing to do here

Here's a fiddle to play with. Sorry for that confusion caused by my original answer. (

share|improve this answer

Your Answer


