html5 js打开新页面,JavaScript实现按Ctrl键打开新页面

(译者注: 本文解决的是按 Ctrl键时使用JS打开新页面的问题)

当然,像下面这样用一个简单的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进行页面重定向时你也应该记得这一点。这是一个很小的代码改进,但对可用性的提高却是非常重要的!

声明：本文原创发布php中文网，转载请注明出处，感谢您的尊重！如有疑问，请联系admin@php.cn处理

html5 js打开新页面,JavaScript实现按Ctrl键打开新页面_javascript技巧相关推荐

html5 js 手机剪切板,JavaScript+Html5实现按钮复制文字到剪切板功能(手机网页兼容)...
新学习JavaScript,就碰到这么一个需求,几乎网上的方法都试过了.写出了总结下使用的方法:clipboard 插件下载地址:https://github.com/zenorocha/clipb ...
html5 js 修改css样式,JavaScript修改css样式style_javascript技巧_脚本之家
一.局部改变样式分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把"N&quo ...
html语言中mouse over,javascript中mouseover、mouseout使用详解_javascript技巧-js教程
本文并没有像标题说的那样,真正阻止事件元素的子元素冒泡... 只是在子元素冒泡到事件元素处时进行了一个判断,判断是否要触发事件,哦...不对应该是是否要运行事件函数中的相关操作... 首先你可以猛戳 ...
php图片轮播特效,基于javascript实现样式清新图片轮播特效_javascript技巧
本文实例为大家分享了javascript实现图片轮播特效,供大家参考,具体内容如下一.实现效果如上图: 1.图片自动依次轮换,每轮换到一张图片,下面对应的小图标出现红色边框,并显示对应的图片名称 ...
算法谜题 php,JavaScript实现N皇后问题算法谜题解答_javascript技巧
谜题 N皇后问题.将N个皇后放置在NxN的国际象棋棋盘上,其中没有任何两个皇后处于同一行.同一列或同一对角线上,以使得它们不能互相攻击. 策略回溯法. JavaScript解以8皇后问题为例: 代 ...
php函数嵌套作用域,javascript 嵌套的函数（作用域链）_javascript技巧
嵌套的函数(作用域链) 当你进行函数的嵌套时,要注意实际上作用域链是发生变化的,这点可能看起来不太直观.你可把下面的代码置入firebug监视值的变化. var testvar = 'window属性 ...
详细简单的php图片轮播,最简单的JavaScript图片轮播代码(两种方法)_javascript技巧...
通过改变每个图片的opacity属性: 素材图片: 代码一: 最简单的轮播广告代码二: 首先第一步,下载好一个jquery库的插件,jquery.js 网上很多随处可以下载．下载的插件要放在目录下． ...
PHP——0128练习相关2——js点击button按钮跳转到另一个新页面
js点击button按钮跳转到另一个新页面投稿:whsnow 字体:[增加减小] 类型:转载时间:2014-10-10 我要评论点击按钮怎么跳转到另外一个页面呢?点击图片要跳转到新的页面时,怎 ...
html5实现浏览器自动全屏,[JavaScript] 用html5 js实现浏览器全屏
项目中需要将后台浏览器的窗口全屏,也就是我们点击一个按钮要实现按F11全屏的效果. 在HTML5中,W3C制定了关于全屏的API,就可以实现全屏幕的效果,也可以让页面中的图片,视频等全屏目前只有g ...
js关闭当前弹出的小窗口并打开新窗口
一.页面执行流程说明: 1.点击父页面a.html的"点我打开新窗口"按钮-->弹出新窗口(b.html) 2.点击b.html的超链接"关闭当前窗口并打开新页面& ...

html5 js打开新页面,JavaScript实现按Ctrl键打开新页面_javascript技巧

html5 js打开新页面,JavaScript实现按Ctrl键打开新页面_javascript技巧相关推荐

最新文章

热门文章