完好用户体验: 活用window.location与window.open解决页面跳转问题

原文地址: JavaScript Redirects and window.open
原文日期: 2014年08月27日
翻译日期: 2014年08月31日
翻译人员: 铁锚

(译者注: 本文解决的是按 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进行页面重定向时你也应该记得这一点。这是一个非常小的代码改进,但对可用性的提高却是非常重要的!