Mailto link is navigating to different url

Question

I am using MVC 5 and when I try to click on <a href="mailto:[email protected]"></a> all browsers try to navigate www.website.com/some/route/id/mailto:[email protected].

I don't understand this behavior and can't find anything about someone having this problem.

HTML:

<section>
    <ul>
        <li>
            <a href="mailto:[email protected]">
                <div class="social-icon mailto"></div>
            </a>
        </li>
    </ul>
</section>

Maybe this is interfering:

app.click_handler = function (e) {

        if (!GLOBALS.SUPPORT.PUSH_STATE)
            return true;

        var url = $(this).attr('href'),
            title = $(this).attr('title');

        if (url.match(/:\/\//)) {
            return true;
        }

        if (url === '#') {
            return false;
        }

        e.preventDefault();

        GLOBALS.VALUES.CURRENT_ELEMENT = $(this);

        History.pushState({}, title, url);
    };

$(document).on('click', 'a', app.click_handler);

Answer 1

That code seems to interfere with links, but allow ones that have a :// inside them or if they are just #.

So you can add another check as well

if (url.match(/^mailto:/)){
 return true;
}

so it becomes

app.click_handler = function (e) {

    if (!GLOBALS.SUPPORT.PUSH_STATE)
        return true;

    var url = $(this).attr('href'),
        title = $(this).attr('title');

    if (url.match(/:\/\//)) {
        return true;
    }

    if (url.match(/^mailto:/)) {
        return true;
    }

    if (url === '#') {
        return false;
    }

    e.preventDefault();

    GLOBALS.VALUES.CURRENT_ELEMENT = $(this);

    History.pushState({}, title, url);
};

$(document).on('click', 'a', app.click_handler);