JavaScript实现按Ctrl键打开新页面
更新时间：2014年09月04日 09:33:01 投稿：junjie
这篇文章主要介绍了JavaScript实现按Ctrl键打开新页面的例子,本文方法适用HTML5环境中,需要的朋友可以参考下
(译者注: 本文解决的是按 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 中如何让 this 保持正确的指向的解决方案,文中给大家介绍了三种解决方案,使用闭包,使用箭头函数和换绑 this这三种方法,文中有详细的代码示例供大家参考,需要的朋友可以参考下2024-01-01
如果想创建一个含有数字、字母（大小写）或者符号的字符串，比如从[a-zA-Z0-9]集合中中创建一个随机的字符串，长度为5.有没有什么比较好的代码呢？本文提供了几种方法，包括自动改变字符集合。一起来学习下。2016-08-08
简单对比分析JavaScript中的apply,call与this的使用
简单的说call，apply都属于Function.prototype的一个方法，它是JavaScript引擎内在实现的，因为属于Function.prototype，所以每个Function对象实例(就是每个方法)都有call，apply属性。既然作为方法的属性，那它们的使用就当然是针对方法的了，这两个方法是容易混淆的2015-12-12
Javascript基础教程之比较null和undefined值
这篇文章主要介绍了Javascript基础教程之比较null和undefined值的相关知识，非常不错，具有参考借鉴价值，感兴趣的朋友一起学习吧2016-05-05
本文自定义JS功能函数可动态添加网址参数,修改网址参数值，具体实现如下，感兴趣的朋友可以参考下，希望对大家有所帮助2013-08-08
这篇文章主要为大家详细介绍了微信小程序实现无缝滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-03-03
这篇文章主要为大家详细介绍了原生js实现无缝轮播图，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
这篇文章主要介绍了JavaScript正则验证密码强弱度的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-05-05
这篇文章主要为大家详细介绍了JS实现前端分页效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了javascript-封装Date日期类的相关资料,需要的朋友可以参考下2017-05-05
最新评论