JavaScript实现按Ctrl键打开新页面

所属分类：网络编程 / JavaScript 阅读数： 483

收藏 0赞 0分享

(译者注: 本文解决的是按 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

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

更多精彩内容其他人还在看

JavaScript实现按Ctrl键打开新页面

BootStrap数据表格实例代码

基于vue的短信验证码倒计时demo

详解React Native开源时间日期选择器组件(react-native-datetime)

JS库particles.js创建超炫背景粒子插件(附源码下载)

JS库之Waypoints的用法详解

强大的JavaScript响应式图表Chartist.js的使用

详解wow.js中各种特效对应的类名

JS库之Highlight.js的用法详解

详解动画插件wow.js的使用方法

JS库 Highlightjs 添加代码行号的实现代码

网络赚钱

站长故事