How to disable the 'Open Link in New Tab'

Question

How do I disable/remove the 'Open Link in New Tab' option in the right-click menu of the browser? If this is not possible with javascript etc then is there a way to modify what happens when the user clicks on this link, for example, display an alert or prevent the tab from loading..?

Answer 1

I am not sure why would some one downvote your question, what you need to google is how to hijack events using javascript. You can very well show an alert when you click a link and stop it from working. jQuery is a populat JS toolkit and has a method to stop default events on an element, in plain English, using jQuery you can stop a hyperlink from working it and show an alert as well. This link http://api.jquery.com/event.preventDefault/ can help you further. Regarding disabling the context menu that appears on right clicking on a webpage, yes that is very much possible. I am not a JS ninja so can't comment if you can remove an item from context menu but IMO, it should not be possible.

Answer 2

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>.

Answer 3

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!

Answer 4

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.