jquery returns undefined for href when not a proper href

Question

I have the following code:

function DelayTarget(e) {

    var t = $(e.target);

    var href = ((t.is("a") ? t : t.find("a")).first()).attr("href");

    if (typeof href !== typeof undefined && href !== false) {
        // Do something
    }
}

When I test with this link it works correctly:

href="/contact"

When I test with this link it doesn't work:

href="javascript:history.back()"

The first test correctly identifies the href value but the second returns undefined. It seems odd that jquery would know the difference between a valid and invalid url.

Anyone know where I'm going wrong?

UPDATE - this is what is causing the issue:

<a href="javascript:history.back()"><i class="material-icons">arrow_back</i></a>

Answer 1

From W3C :

The target property gets the element on which the event originally occurred, opposed to the currentTarget property, which always refers to the element whose event listener triggered the event.

So it fails because e.target returns the innermost DOM element clicked, in this case the <i> . It has nothing to do with the fact that one of the links contains JavaScript. To solve the problem, just change e.target to e.currentTarget .

Alternatively, use this instead:

$('a').click(function() {
    DelayTarget(this);
});

function DelayTarget(o) {
    var t = $(o);
    var href = (t.is("a") ? t : t.find("a")).first().attr("href");
    if (typeof href !== typeof undefined && href !== false) {
        // Do something
    } 
}

Working fiddle .