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