JavaScript實現按Ctrl鍵開啟新頁面_javascript技巧

(譯者注: 本文解決的是按 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進行頁面重新導向時你也應該記得這一點。這是一個很小的代碼改進,但對可用性的提高卻是非常重要的!