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

(譯者註: 本文解決的是按 Ctrl鍵時使用JS開啟新頁面的問題)

在簡化的HTML5規範中,允許在A 標籤內包含多個DIV 和/或其他區塊級元素. 現在只要用 標籤包住塊元素,就能搞定原來需要用JavaScript來監聽並調用window.location 實作頁面跳轉(redirect)功能.

但使用標籤的這種包裝形式也有不好使的情況—— 例如,某個塊元素(block)內還有一些 標籤, 這種情況下我們只想在點擊parent中以外的其他部分時才跳到一個給定的地址。

當然,像下面這樣用一個簡單的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進行頁面重定向時你也應該記得這一點。這是一個很小的程式碼改進,但對可用性的提高卻是非常重要的!