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 from Phil Klein on Stack OverflowThe 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:
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.
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:
- It's an
<a>...</a>tag (notspan,div,button, etc). - It has
hrefattribute. hrefattribute 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>.
This is a clear education issue on the clients side. As @Seth Warburton has mentioned there have been multiple studies on this. I really like this one: https://www.nngroup.com/articles/new-browser-windows-and-tabs
Do not add any extra javascript to "fix" this issue. It only adds extra junk to download and process for the browser and it's not even the best solution. What are you going to do if your client want 1 specific external link not to open in a new window? Clients ask for the craziest stuff because they don't understand the impact. We do and we should educate them. In the end they will appreciate it.
If the client really insists on changing this behaviour for all external links you might be able to do some database operations to make sure all external links have the "open in new window" checkbox checked. This way they are still able to disable it in the CMS.
It's a simple javascript thing, no need for CMS to do this. Your templates can take care of it. One JS include in the footer, and all your web pages will have this.
https://stackoverflow.com/questions/12987963/open-external-links-in-a-new-tab-without-jquery