JavaScript实现按Ctrl键打开新页面


Posted in Javascript onSeptember 04, 2014

(译者注: 本文解决的是按 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 相关文章推荐
JS trim去空格的最佳实践
Oct 30 Javascript
放弃用你的InnerHTML来输出HTML吧 jQuery Tmpl不详细讲解
Apr 20 Javascript
上传的js验证(图片/文件的扩展名)
Apr 25 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
Node.js中创建和管理外部进程详解
Aug 16 Javascript
javascript框架设计读书笔记之字符串的扩展和修复
Dec 02 Javascript
使用Bootstrap打造特色进度条效果
May 02 Javascript
js获取地址栏参数的两种方法
Jun 27 Javascript
jQuery实现表格冻结顶栏效果
Aug 20 jQuery
JavaScript事件对象深入详解
Dec 30 Javascript
vue-router命名路由和编程式路由传参讲解
Jan 19 Javascript
javascript的hashCode函数实现代码小结
Aug 11 Javascript
js实现图片在未加载完成前显示加载中字样
Sep 03 #Javascript
jquery.idTabs 选项卡使用示例代码
Sep 03 #Javascript
jQuery 1.9移除了$.browser可以使用$.support来替代
Sep 03 #Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 #Javascript
禁止iframe页面的所有js脚本如alert及弹出窗口等
Sep 03 #Javascript
禁用页面部分JavaScript不是全部而是部分
Sep 03 #Javascript
让JavaScript的Alert弹出框失效的方法禁止弹出警告框
Sep 03 #Javascript
You might like
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
Extjs Gird 支持中文拼音排序实现代码
2013/04/15 Javascript
JQuery中的html()、text()、val()区别示例介绍
2014/09/01 Javascript
用js传递value默认值的示例代码
2014/09/11 Javascript
jQuery中map()方法用法实例
2015/01/06 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
JavaScript实现select添加option
2015/07/03 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
javascript如何实现360度全景照片问题汇总
2016/04/04 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
2016/10/19 Javascript
js获取指定字符前/后的字符串简单实例
2016/10/27 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
JS函数参数的传递与同名参数实例分析
2020/03/16 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
win7下python3.6安装配置方法图文教程
2018/07/31 Python
python 对key为时间的dict排序方法
2018/10/17 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
Hawes & Curtis官网:英国经典品牌
2019/07/27 全球购物
亚洲领先的旅游体验市场:Voyagin
2019/11/23 全球购物
2014年组织委员工作总结
2014/12/01 职场文书
幼儿园教师个人总结
2015/02/05 职场文书
导游词之张家界
2019/10/31 职场文书
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL
Mysql如何实现不存在则插入,存在则更新
2022/03/25 MySQL
html原生table实现合并单元格以及合并表头的示例代码
2023/05/07 HTML / CSS