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.