html5 js打开新页面,JavaScript实现按Ctrl键打开新页面_javascript技巧

(译者注: 本文解决的是按 Ctrl键时使用JS打开新页面的问题)

当然,像下面这样用一个简单的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

var url = 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进行页面重定向时你也应该记得这一点。这是一个很小的代码改进,但对可用性的提高却是非常重要的!

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理