how to prevent blur() running when clicking a link in jQuery?

Question

i have:

<input type="text" />

and

$('input').blur(function(){
    alert('stay focused!');
});

I want to prevent the blur function running when I'm "blurring" by clicking on an anchor element.

I.E. if i tab to another input, click somewhere on the page etc i want the blur to fire, but if i click a link, I don't want it to fire.

Is this easily achievable, or do i need to hack about with delegates and semaphores?

Thanks

Answer 1

If you want to keep the cursor at its position in a contenteditable element, simply:

$('button').mousedown(function(){return false;});

Answer 2

Delay the blur a bit. If the viewer clicks a link to another page, the page should change before this code gets a chance to run:

$('input').blur(function(){
    setTimeout(function() {alert('stay focused!');}, 1000);
});

You can experiment with what delay value for the timeout seems appropriate.

Answer 3

You can get this behavior by calling preventDefault() in the mousedown event of the control being clicked (that would otherwise take focus). For example:

btn.addEventListener('mousedown', function (event) {
  event.preventDefault()
})

btn.addEventListener('click', function(ev) {
    input.value += '@'
    input.setSelectionRange(ta.value.length, ta.value.length)
})

See live example here.

Answer 4

Some clarification that was too long to put in a comment.

The click event represents both pressing the mouse button down, AND releasing it on a particular element.

The blur event fires when an element loses focus, and an element can lose focus when the user "clicks" off of the element. But notice the behavior. An element gets blurred as soon as you press your mouse DOWN. You don't have to release.

That is the reason why blur gets fired before click.

A solution, depending on your circumstances, is to call preventDefault on mousedown and touchstart events. These events always (I can't find concrete documentation on this, but articles/SO posts/testing seem to confirm this) fire before blur.

This is the basis of Jens Jensen's answer.