How to disable the 'Open Link in New Tab' in the browser?

The ability to open a link in a new tab/window is native functionality of many browsers. If you do not wish to allow this type of activity, then you need to notify the browser that your link is not truly a link. The easiest way to do so is to remove the href attribute from your a element.

HTML:

<a href="http://google.com">Can be opened in new tab/window</a>
<a>Cannot be opened in new tab/window</a>

Now there are some other things that the browser may be doing for you by default when it sees a link. If you have not defined any styling of a elements, it's likely that your new fancy pseudo-link will not appear with a link font-color, pointer, and underline. You can go ahead and do that easily enough.

CSS:

a {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
}

That hopefully answers the question of how you disable/remove the 'Open Link in New Tab' option in the right-click menu of the browser. For some extra credit though I'm going to assume that you probably want the link to still function like a regular link when clicked. Feel free to use some JavaScript to make that happen. Here's an example using jQuery:

JavaScript:

$("body").on("click", "a[data-href]", function() {
    var href = $(this).data("href");
    if (href) {
        location.href = href;
    }
});

Modified Html:

<a href="http://google.com">Can be opened in new tab/window</a>
<a data-href="http://google.com">Cannot be opened in new tab/window</a>

Modified CSS:

a[href], a[data-href] {
    color: blue;
    cursor: pointer;
    text-decoration: underline;
}

Hope this helps!


2019

I'll highlight 2 important comments:

  1. nnnnnn @ Aug 10 '11 at 5:49 :

    As a user I would prefer that type of feature be triggered from a button rather than a link. I expect links to work in a more standard way including giving me the option to right-click for the menu or to middle-click to open directly in a new tab.

  2. Pars @ Dec 21 '13 at 13:10 :

    this wont work when you click by mouse middle button or hold CTRL and click on a link. how to those cases.

It's up to the browser to decide whether it gets the link-behavior or not.

Some modern browser (like Chrome) will consider it a link if all the below conditions matches:

  1. It's an <a>...</a> tag (not span, div, button, etc).
  2. It has href attribute.
  3. href attribute is not empty.

The below will get the link-behavior:

<a href="http://www.website.com">Click Here</a>

The below will NOT get the link-behavior:

<a>Not link because no href</a>
<a href="">Not link because empty href</a>
<span>Not link because not "a" tag</span>
<span href="http://www.website.com">Not link because not "a" tag again</span>

Important Note:

Again, it's up to the browser to decide. Some old/stupid browsers may give it link-behavior if ANY of the 3 conditions above matches!

Conclusion

If it's a link then use <a href="some_link">...</a>. If it's not a link then use something else, like <button>.


Have solved the main issue now, quite easily as it turned out just by passing the query string of the href to an ajax function.

I probably should have explained in my question that what I wanted was intended only as a temporary measure. Anyway thanks for all the comments.