JavaScript實現(xiàn)按Ctrl鍵打開新頁面
(譯者注: 本文解決的是按 Ctrl鍵時使用JS打開新頁面的問題)
在簡化的HTML5規(guī)范中,允許在 A 標簽內(nèi)包含多個 DIV 和/或其他塊級元素. 現(xiàn)在只要用 <a> 標簽包住塊元素,就能搞定原來需要用JavaScript來監(jiān)聽并調(diào)用 window.location 實現(xiàn)頁面跳轉(redirect)功能.
但使用<a>標簽的這種包裝形式也有不好使的情況 —— 例如,某個塊元素(block)內(nèi)還有一些 <a> 標簽, 這種情況下我們只想在點擊parent中<a>以外的其他部分時才跳轉到一個給定的地址。
當然,像下面這樣用一個簡單的listener 也能實現(xiàn)我們的需求:
someElement.addEventListener('click', function(e) {
// URL地址是什么都行,或者你也可以使用其他的代碼來指定.
// 此處用的是該元素的 `data-src` DOM屬性(attribute)
window.location = someElement.get('data-url');
});
…但這有時會有很糟的用戶體驗, 當按住CTRL鍵(Mac是COMMAND鍵),再用鼠標點擊時,它會在同一個(標簽頁)窗口內(nèi)打開鏈接。知道有這個問題,你肯定想到了該如何去解決.我們修改一小點代碼就能達成這個目的,趕快花點時間去修復你的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;
}
});
原文作者已經(jīng)在 http://davidwalsh.name/ 網(wǎng)站上實現(xiàn)了這個功能,在使用window.location進行頁面重定向時你也應該記得這一點。這是一個很小的代碼改進,但對可用性的提高卻是非常重要的!
相關文章
這篇文章主要介紹了關于在 JavaScript 中如何讓 this 保持正確的指向的解決方案,文中給大家介紹了三種解決方案,使用閉包,使用箭頭函數(shù)和換綁 this這三種方法,文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2024-01-01
javascript創(chuàng)建含數(shù)字字母的隨機字符串方法總結
如果想創(chuàng)建一個含有數(shù)字、字母（大小寫）或者符號的字符串，比如從[a-zA-Z0-9]集合中中創(chuàng)建一個隨機的字符串，長度為5.有沒有什么比較好的代碼呢？本文提供了幾種方法，包括自動改變字符集合。一起來學習下。2016-08-08
簡單對比分析JavaScript中的apply,call與this的使用
簡單的說call，apply都屬于Function.prototype的一個方法，它是JavaScript引擎內(nèi)在實現(xiàn)的，因為屬于Function.prototype，所以每個Function對象實例(就是每個方法)都有call，apply屬性。既然作為方法的屬性，那它們的使用就當然是針對方法的了，這兩個方法是容易混淆的2015-12-12
Javascript基礎教程之比較null和undefined值
這篇文章主要介紹了Javascript基礎教程之比較null和undefined值的相關知識，非常不錯，具有參考借鑒價值，感興趣的朋友一起學習吧2016-05-05
JS自定義功能函數(shù)實現(xiàn)動態(tài)添加網(wǎng)址參數(shù)修改網(wǎng)址參數(shù)值
本文自定義JS功能函數(shù)可動態(tài)添加網(wǎng)址參數(shù),修改網(wǎng)址參數(shù)值，具體實現(xiàn)如下，感興趣的朋友可以參考下，希望對大家有所幫助2013-08-08
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)無縫滾動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要為大家詳細介紹了原生js實現(xiàn)無縫輪播圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-01-01
JavaScript正則驗證密碼強弱度的實現(xiàn)方法
這篇文章主要介紹了JavaScript正則驗證密碼強弱度的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2021-05-05
這篇文章主要為大家詳細介紹了JS實現(xiàn)前端分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了javascript-封裝Date日期類的相關資料,需要的朋友可以參考下2017-05-05