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读取ASP设定的COOKIE
Feb 15 Javascript
javascript 写类方式之十
Jul 05 Javascript
Jquery实现视频播放页面的关灯开灯效果
May 27 Javascript
javascript设计模式之中介者模式Mediator
Dec 30 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
解决jquery无法找到其他父级子集问题的方法
May 10 Javascript
angular.js实现购物车功能
Oct 23 Javascript
vue2.0在table中实现全选和反选的示例代码
Nov 04 Javascript
实现jquery放大镜的两种方法
Feb 22 jQuery
jQuery中复合选择器简单用法示例
Mar 31 jQuery
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
jQuery HTML获取内容和属性操作实例分析
May 20 jQuery
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+Mysql+jQuery实现动态展示信息
2011/10/08 PHP
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
php session_decode函数用法讲解
2019/05/26 PHP
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
2012/08/14 Javascript
jQuery中阻止冒泡事件的方法介绍
2014/04/12 Javascript
wap浏览自动跳转到wap页面的js代码
2014/05/17 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
2015/08/05 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
原生js验证简洁注册登录页面
2016/12/17 Javascript
js封装tab标签页实例分享
2016/12/19 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
React组件生命周期详解
2017/07/03 Javascript
Javascript快速实现浏览器系统通知
2017/08/26 Javascript
Angular中的$watch方法详解
2017/09/18 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
vue组件定义,全局、局部组件,配合模板及动态组件功能示例
2019/03/19 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
前端开发之便利店收银系统代码
2019/12/27 Javascript
Nodejs在局域网配置https访问的实现方法
2020/10/17 NodeJs
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
python里对list中的整数求平均并排序
2014/09/12 Python
Python堆排序原理与实现方法详解
2018/05/11 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
Selenium 安装和简单使用的实现
2020/12/04 Python
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
Linux如何为某个操作添加别名
2013/03/01 面试题
大学生党员自我批评
2014/02/14 职场文书
运动会表扬稿范文
2015/05/05 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
完美处理python与anaconda环境变量的冲突问题
2021/04/07 Python
详解Vue的sync修饰符
2021/05/15 Vue.js
Win10 和 Win11可以共存吗? win10/11产品生命周期/服务更新介绍
2021/11/21 数码科技