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 小贴士一星期合集
Apr 07 Javascript
JS隐藏参数post传值实例
Apr 18 Javascript
JavaScript实现的日期控件具体代码
Nov 18 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
JS实现图片放大镜效果的方法
Feb 27 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
AngularJS与后端php的数据交互方法
Aug 13 Javascript
vue 项目接口管理的实现
Jan 17 Javascript
jQuery实现动态添加和删除input框实例代码
Mar 26 jQuery
js实现缓动动画
Nov 25 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
?生?D片??C字串
2006/12/06 PHP
php获取某个目录大小的代码
2008/09/10 PHP
PHP 超级全局变量相关总结
2020/06/30 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
JS 自动完成 AutoComplete(Ajax 查询)
2009/07/07 Javascript
Safari5中alert的无限循环BUG
2011/04/07 Javascript
使用jquery实现简单的ajax
2013/07/08 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
2013/12/27 Javascript
jquery插件开发之实现md5插件
2014/03/17 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
js实现的全国省市二级联动下拉选择菜单完整实例
2015/08/17 Javascript
Javascript设计模式之观察者模式(推荐)
2016/03/29 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
Bootstrap Navbar Component实现响应式导航
2016/10/08 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
解决Vue使用mint-ui loadmore实现上拉加载与下拉刷新出现一个页面使用多个上拉加载后冲突问题
2017/11/07 Javascript
微信小程序如何获取openid及用户信息
2018/01/26 Javascript
webpack-dev-server自动更新页面方法
2018/02/22 Javascript
swiper 解决动态加载数据滑动失效的问题
2018/02/26 Javascript
vue+iview实现分页及查询功能
2020/11/17 Vue.js
Django 2.0版本的新特性抢先看!
2018/01/05 Python
Python爬虫实例_城市公交网络站点数据的爬取方法
2018/01/10 Python
Django使用Mysql数据库已经存在的数据表方法
2018/05/27 Python
Python 时间戳之获取整点凌晨时间戳的操作方法
2020/01/28 Python
Django ORM 查询表中某列字段值的方法
2020/04/30 Python
CSS3制作圆形滚动进度条动画的示例
2020/11/05 HTML / CSS
Python如何定义一个函数
2015/09/01 面试题
领导班子奢靡之风查摆问题及整改措施
2014/09/27 职场文书
简单的离婚协议书范本
2014/11/16 职场文书
个人催款函范文
2015/06/24 职场文书
先进工作者主要事迹材料
2015/11/03 职场文书
《钓鱼的启示》教学反思
2016/02/18 职场文书
2016年大学生党员公开承诺书
2016/03/24 职场文书
留学文书中的个人陈述,应该注意哪些问题?
2019/08/23 职场文书
html输入两个数实现加减乘除功能
2021/07/01 HTML / CSS
SpringMVC 整合SSM框架详解
2021/08/30 Java/Android