link with target="_blank" does not open in new tab in Chrome

Question

On this website, the top accordion navigation contains an element called "Foundation": (screenshot).

This element is produced by HTML code:

<a href="http://www.foracure.org.au" target="_blank" style="width: 105px;"></a> 

However, in Chrome, when you click on this element, the new website does not open in a new tab.

Can you please tell me why? Thank you.

Answer 1

Replace   <a href="http://www.foracure.org.au" target="_blank"></a>      with   <a href="#" onclick='window.open("http://www.foracure.org.au");return false;'></a> 

in your code and will work in Chrome and other browsers.

Thanks Anurag

Answer 2

Because JavaScript is handling the click event. When you click, the following code is called:

el.addEvent('click', function(e){     if(obj.options.onOpen){         new Event(e).stop();         if(obj.options.open == i){             obj.options.open = null;             obj.options.onClose(this.href, i);         }else{             obj.options.open = i;             obj.options.onOpen(this.href, i);         }        }        }) 

The onOpen manually changes the location.

Edit: Regarding your comment... If you can modify ImageMenu.js, you could update the script which calls onClose to pass the a element object (this, rather than this.href)

obj.options.onClose(this, i); 

Then update your ImageMenu instance, with the following onOpen change:

window.addEvent('domready', function(){     var myMenu = new ImageMenu($$('#imageMenu a'), {         openWidth: 310,         border: 2,         onOpen: function(e, i) {             if (e.target === '_blank') {                 window.open(e.href);                 } else {                 location = e.href;             }         }     }); }); 

This would check for the target property of the element to see if it's _blank, and then call window.open, if found.

If you'd prefer not to modify ImageMenu.js, another option would be to modify your links to identify them in your onOpen handler. Say something like:

<a href="http://www.foracure.org.au/#_b=1" target="_blank" style="width: 105px;"></a> 

Then, update your onOpen call to:

onOpen: function(e, i) {     if (e.indexOf('_b=1') > -1) {         window.open(e);        } else {         location = e;     } } 

The only downside to this is the user sees the hash on hover.

Finally, if the number of links that you plan to open in a new window are low, you could create a map and check against that. Something like:

var linksThatOpenInANewWindow = {     'http://www.foracure.org.au': 1 };  onOpen: function(e, i) {     if (linksThatOpenInANewWindow[e] === 1) {         window.open(e);        } else {         location = e     } } 

The only downside is maintenance, depending on the number of links.

Others have suggested modifying the link (using # or javascript:) and adding an inline event handler (onclick) - I don't recommend that at all as it breaks links when JS is disabled/not supported.