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