JavaScript实现按Ctrl键打开新页面
(译者注:本文解决的是按Ctrl键时使用JS打开新页面的问题)
在简化的HTML5规范中,允许在A标签内包含多个DIV和/或其他块级元素.现在只要用<a>标签包住块元素,就能搞定原来需要用JavaScript来监听并调用window.location实现页面跳转(redirect)功能.
但使用<a>标签的这种包装形式也有不好使的情况——例如,某个块元素(block)内还有一些<a>标签,这种情况下我们只想在点击parent中<a>以外的其他部分时才跳转到一个给定的地址。
当然,像下面这样用一个简单的listener也能实现我们的需求:
someElement.addEventListener('click',function(e){
//URL地址是什么都行,或者你也可以使用其他的代码来指定.
//此处用的是该元素的`data-src`DOM属性(attribute)
window.location=someElement.get('data-url');
});
…但这有时会有很糟的用户体验,当按住CTRL键(Mac是COMMAND键),再用鼠标点击时,它会在同一个(标签页)窗口内打开链接。知道有这个问题,你肯定想到了该如何去解决.我们修改一小点代码就能达成这个目的,赶快花点时间去修复你的listener吧:
someElement.addEventListener('click',function(e){
//获取URL
varurl=someElement.get('data-url');
//判断是否按下了CTRL键
if(e.metaKey||e.ctrlKey||e.button===1){
window.open(url);
}else{
window.location=url;
}
});
原文作者已经在http://davidwalsh.name/网站上实现了这个功能,在使用window.location进行页面重定向时你也应该记得这一点。这是一个很小的代码改进,但对可用性的提高却是非常重要的!