html - javascript:void(0) and target="_blank" behaviour - Stack Overflow

admin管理员组

文章数量:1291936

First of all, I am not having a real problem. I'm asking this out of curiosity only.

I accidentally run into a strange behaviour when using javascript:void(0) and target="_blank" within the same link, like this.

<a href="javascript:void(0);" target="_blank" /> Link </a>

I found that Chrome is handling this normally and not doing anything when you click the link, while IE and Firefox open up a blank new tab.

My question is, isn't javascript:void(0) supposed to prevent any click event firing from a link, even if it targets new tab/window? And why is target="_blank" overiding it?

Also what is the best approach if I am, let's say, filling the href attribute with some backend language and I prefer target="_blank" hard coded beside the href attribute?

First of all, I am not having a real problem. I'm asking this out of curiosity only.

I accidentally run into a strange behaviour when using javascript:void(0) and target="_blank" within the same link, like this.

<a href="javascript:void(0);" target="_blank" /> Link </a>

I found that Chrome is handling this normally and not doing anything when you click the link, while IE and Firefox open up a blank new tab.

My question is, isn't javascript:void(0) supposed to prevent any click event firing from a link, even if it targets new tab/window? And why is target="_blank" overiding it?

Also what is the best approach if I am, let's say, filling the href attribute with some backend language and I prefer target="_blank" hard coded beside the href attribute?

• javascript
• html

Share Improve this question Follow asked Jun 13, 2013 at 18:28 Goran LepurGoran Lepur 59411 gold badge44 silver badges1515 bronze badges 3

• 1 I thought javascript:void(0); was considered bad practice. – j08691 Commented Jun 13, 2013 at 18:30
• 1 A better approach would be to not use empty anchor tags, instead use styled spans. – tymeJV Commented Jun 13, 2013 at 18:32
• How did my reply not provide an answer? The code I provided does what I believe you want - it looks like a link, but doesn't visit anything. You asked for the best approach, I gave my best approach. – Zdenek Commented Jun 20, 2014 at 19:41

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

<a href=# onclick="return false;">I look like a link!</a>

Always used this.

EDIT: To your question about void(0), the onclick is supposed to have a higher priority than the href attribute because it provides richer functionality and has the capability of actually preventing the href from operating - thus my return false. The href is only there for robots and old browsers if the onclick event is present.

Also, whether a regular navigation is performed with oddly-formed URLs is at the discretion of the browser. If the link starts with a hash, it should just jump to a bookmark. But when it's empty or contains other protocols, it all depends on the browser if it decides to try and visit the new document. Entering the javascript: pseudo protocol is traditionally used for bookmarklets which are expected to work with the current page, so anything javascript: that doesn't do document.write() or other destructive modification should leave the page unreloaded.

EDIT2: I'm not sure what you mean by backend language in href, but consider HTML-valid data- attributes to give your code something to work with if it doesn't belong logically in a href attribute.

I have solved this by using simple trick. It might be useful.

I have removed the target attribute dynamically based on the link. i.e if the link is undefined or empty or javascript:void(0), then we will remove the target attribute by using below code.

If the link is proper one, we will add the target attribute for that hyper link("second if condition" will do that, because in my page links are dynamic).

I have copied the sample html file(Test.html). if we want to remove the attribute on onload of the page, copy the script code in this file and paste it at the end of your required file.

If we want to apply this for dynamic links, we have to put this code in one function and we can call it when it is required.

This code will be applicable to all the hyper links in that page. We can limit this to particular set of links by using class or any other attributes.

Test.html
---------

<script src="https://code.jquery./jquery-3.1.1.min.js"></script>
<a href="javascript:void(0);" target="_blank">Link1</a>
<a href="javascript:void(0);" target="_blank">Link2</a>
<a href="www.url1." target="_blank">Link3</a>
<a href="www.url2." target="_blank">Link4</a>

<script>
$("a").each(function() {

if(typeof(this.href) == 'undefined' || this.href == 'javascript:void(0);') {
    $(this).attr('href', 'javascript:void(0);');
    $(this).removeAttr('target');
}
if(typeof(this.href) != 'undefined' && this.href != 'javascript:void(0);') {
    var s_link = this.href;
    if (s_link.indexOf('http://') === -1 && s_link.indexOf('https://') === -1) {
        s_link = 'https://' + s_link;
    }   
    $(this).attr('href', s_link);
    $(this).attr('target', '_blank');
}

});
</script>

本文标签： htmljavascriptvoid(0) and targetquotblankquot behaviourStack Overflow