anchor tag href is different than what is set

Question

I have an anchor tag that looks like this:

<a href="/folder/folderid">name</a>

On click of this anchor tag I'm doing this

    handleAnchorClick: function(e) {
        console.log("target:",e.target);
        console.log("href:",e.target.href);
        event.preventDefault();

        // navigate to this folder using my app router
        backbonerouter.navigate(e.target.href,{trigger:true}); //does not work as the value is wrong
        // tries to navigate to this: mydomain.com/mydomain.com/folder/folderid
    }

the console log statement gives me this:

target: <a href="/folder/folderid">name</a>
href: "https://mydomain.com/folder/folderid"  //instead of just /folder/folderid

What the hell is going on, how do I navigate to this folder id using my router.

Answer 1

The href property, as in element.href, always returns an absolute URL containing the hostname etc.

If you just want the attributes value and not the absolute URL, you can do

e.target.getAttribute('href');

or with jQuery

$(e.target).attr('href');

not that in jQuery prop() would return the property, i.e. the absolute URL

$(e.target).prop('href');

FIDDLE