How can determine which DOM object was clicked/focused with jQuery and blur event?

Question

I have this HTML:

<div class="container">
    <a href="#mylink" tabindex="-1">select this</a>
    <a href="#mylink" tabindex="-1">select this</a>
    <a href="#mylink" tabindex="-1">select this</a>
</div>

<a href="#begin" tabindex="-1">click here to begin selecting</a>

And I have this JS/jQuery snippet of code:

$('a[href="#begin"]').blur(function(e) {
    console.log( e.target.href ); // this will output: #begin
});

So what I need with .blur is to determine which element got focus after the <a href="#begin"> was blured.

Is this possible with JS/jQuery?

Possible duplicate: http://stackoverflow.com/questions/121499/when-onblur-occurs-how-can-i-find-out-which-element-focus-went-to — Flash, Jan 07 '13 at 10:20
possible duplicate of [Get the clicked object that triggered jquery blur() event](http://stackoverflow.com/questions/11544554/get-the-clicked-object-that-triggered-jquery-blur-event) — Yogh, Jul 12 '15 at 22:47

musefan · Answer 1 · 2013-01-07T16:46:46.813

You can check which element gets focus by using the .focus method, similar to .blur

During your blur event, you can set a flag to "look out" for the next control focus. In your focus function, if this flag is set then you know your "being" field was the last one to lose focus. You will also need to reset the flag when any other field is blurred though.

Here is a simple concept example...

var beginWasLast = false;

$('a[href="#begin"]').blur(function(e) {
    e.preventDefault();
    beginWasLast = true;
    console.log( e.target.href ); // this will output: #begin
});

$('a[href="#begin"]').click(function(e) {
    e.preventDefault();
});

$('a:not(a[href="#begin"])').blur(function(e) {
    e.preventDefault();
    beginWasLast = false;
});

$('a:not(a[href="#begin"])').click(function(e) {
    e.preventDefault();
    if(beginWasLast){
        console.log( e.target.href );
    }
});

Here is a working example

I added in the e.preventDefault(); calls so that the page didn't reload when the links were clicked.

well I've wrote a little hack for this... I've just setTimeout for 500 ms to trigger .hide() event, and the "click" event executes itself before the setTimeout is complete, so I get blur for my case working perfectly! thanks for your tips though! — , Jan 07 '13 at 10:25
@Zlatan: What has timeout and hide got to do with your question? You mention nothing about them! — musefan, Jan 07 '13 at 10:32

score 1 · Answer 2 · answered Jan 07 '13 at 10:20

It's not possible to know which element got the focus from the blur event itself. You would need to add a click event to get that, like this:

$('a[href="#begin"]')
    .blur(function(e) {
        console.log( e.target.href ); // previous link href
    });
    .click(function(e) {
        console.log( e.target.href ); // current link href
    });

score 1 · Answer 3 · answered Jan 07 '13 at 11:06

1

An other possible way could be: SEE DEMO

$('a[href="#begin"]').blur(function(e) {
  setTimeout(function(){console.log( $(document.activeElement).attr('href') );},0); 
});

answered Jan 07 '13 at 11:06

A. Wolff

74,033
9
94
155

How can determine which DOM object was clicked/focused with jQuery and blur event?

3 Answers3