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 相关文章推荐
jQuery入门问答 整理的几个常见的初学者问题
Feb 22 Javascript
jqPlot 基于jquery的画图插件
Apr 26 Javascript
jquery如何判断某元素是否具备指定的样式
Nov 05 Javascript
JS根据年月获得当月天数的实现代码
Jul 03 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
使用cluster 将自己的Node服务器扩展为多线程服务器
Nov 10 Javascript
Jquery动态替换div内容及动态展示的方法
Jan 23 Javascript
轻量级jQuery插件slideBox实现带底栏轮播(焦点图)代码
Mar 28 Javascript
JS实现浏览器打印、打印预览示例
Feb 28 Javascript
JS实现微信摇一摇原理解析
Jul 22 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
JS代码优化的8点建议
Feb 04 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
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
PHP文件上传类实例详解
2016/04/08 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
PHP基于ICU扩展intl快速实现汉字转拼音及按拼音首字母分组排序的方法
2017/05/03 PHP
js 日期比较相关天数代码
2014/04/02 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
2016/01/28 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
JavaScript从数组的indexOf()深入之Object的Property机制
2016/05/11 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
nodejs结合socket.io实现websocket通信功能的方法
2018/01/12 NodeJs
jQuery实现模拟搜索引擎的智能提示功能简单示例
2019/01/27 jQuery
微信小程序时间戳转日期的详解
2019/04/30 Javascript
详解在vue-cli3.0中自定css、js和图片的打包路径
2019/08/26 Javascript
JavaScript canvas绘制渐变颜色的矩形
2020/02/18 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
[01:02:47]EG vs Secret 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.21.mp4
2020/07/19 DOTA
python del()函数用法
2013/03/24 Python
python中import reload __import__的区别详解
2017/10/16 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
Selenium定位元素操作示例
2018/08/10 Python
Python 实现的 Google 批量翻译功能
2019/08/26 Python
python双向链表原理与实现方法详解
2019/12/03 Python
Python图像处理库PIL的ImageFilter模块使用介绍
2020/02/26 Python
mac 上配置Pycharm连接远程服务器并实现使用远程服务器Python解释器的方法
2020/03/19 Python
为什么说python更适合树莓派编程
2020/07/20 Python
html5 canvas fillRect坐标和大小的问题解决方法
2014/03/26 HTML / CSS
HTML5基于flash实现播放RTMP协议视频的示例代码
2020/12/04 HTML / CSS
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
Can a struct inherit from another class? (结构体能继承类吗)
2014/07/22 面试题
加强作风建设工作总结
2014/10/23 职场文书
2015毕业生实习工作总结
2014/12/12 职场文书
网吧温馨提示
2015/07/17 职场文书
导游词之镇江焦山
2019/11/21 职场文书
python函数指定默认值的实例讲解
2021/03/29 Python
MongoDB balancer的使用详解
2021/04/30 MongoDB
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL