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 相关文章推荐
Javascript验证Visa和MasterCard信用卡号的方法
Jul 27 Javascript
使用JavaScript实现ajax的实例代码
May 11 Javascript
关于Function中的bind()示例详解
Dec 02 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
解决ztree搜索中多级菜单展示不全问题
Jul 05 Javascript
node通过express搭建自己的服务器
Sep 30 Javascript
javascript变量提升和闭包理解
Mar 12 Javascript
vue单页缓存方案分析及实现
Sep 25 Javascript
eslint 的三大通用规则详解
May 16 Javascript
JS实现使用POST方式发送请求
Aug 30 Javascript
JavaScript实现复选框全选和取消全选
Nov 20 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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作的文本留言本的例子(三)
2006/10/09 PHP
PHP 彩色文字实现代码
2009/06/29 PHP
php中$美元符号与Zen Coding冲突问题解决方法分享
2014/05/28 PHP
phpExcel中文帮助手册之常用功能指南
2014/08/18 PHP
PHP使用PHPexcel导入导出数据的方法
2015/11/14 PHP
php获取目录中所有文件名及判断文件与目录的简单方法
2017/03/04 PHP
PHP机器学习库php-ml的简单测试和使用方法
2017/07/14 PHP
javascript 面向对象编程基础:封装
2009/08/21 Javascript
关于JavaScript中var声明变量作用域的推断
2010/12/16 Javascript
URL地址中的#符号使用说明
2011/02/12 Javascript
JavaScript SetInterval与setTimeout使用方法详解
2013/11/15 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
jquery实现的判断倒计时是否结束代码
2016/02/05 Javascript
JavaScript动态添加事件之事件委托
2016/07/12 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
vue开发调试神器vue-devtools使用详解
2017/07/13 Javascript
AngularJS实现自定义指令及指令配置项的方法
2017/11/20 Javascript
jackson解析json字符串,首字母大写会自动转为小写的方法
2017/12/22 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
node删除、复制文件或文件夹示例代码
2019/08/13 Javascript
Python中zip()函数用法实例教程
2014/07/31 Python
python爬虫常用的模块分析
2014/08/29 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
Python可视化mhd格式和raw格式的医学图像并保存的方法
2019/01/24 Python
python中append实例用法总结
2019/07/30 Python
Python分割训练集和测试集的方法示例
2019/09/19 Python
Python collections模块的使用方法
2020/10/09 Python
Kenneth Cole官网:纽约时尚优雅品牌
2016/11/14 全球购物
新加坡网上美容店:Hermo新加坡
2019/06/19 全球购物
制药工程专业个人求职自荐信
2014/01/25 职场文书
无故旷工检讨书
2014/01/26 职场文书
《生命 生命》教学反思
2014/04/19 职场文书
敬老院活动总结
2014/04/28 职场文书
校本课程教学计划
2015/01/19 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android