JavaScript實(shí)現(xiàn)按Ctrl鍵打開新頁面
(譯者注: 本文解決的是按 Ctrl鍵時使用JS打開新頁面的問題)
在簡化的HTML5規(guī)范中,允許在 A 標(biāo)簽內(nèi)包含多個 DIV 和/或其他塊級元素. 現(xiàn)在只要用 <a> 標(biāo)簽包住塊元素,就能搞定原來需要用JavaScript來監(jiān)聽并調(diào)用 window.location 實(shí)現(xiàn)頁面跳轉(zhuǎn)(redirect)功能.
但使用<a>標(biāo)簽的這種包裝形式也有不好使的情況 —— 例如,某個塊元素(block)內(nèi)還有一些 <a> 標(biāo)簽, 這種情況下我們只想在點(diǎn)擊parent中<a>以外的其他部分時才跳轉(zhuǎn)到一個給定的地址。
當(dāng)然,像下面這樣用一個簡單的listener 也能實(shí)現(xiàn)我們的需求:
someElement.addEventListener('click', function(e) {
// URL地址是什么都行,或者你也可以使用其他的代碼來指定.
// 此處用的是該元素的 `data-src` DOM屬性(attribute)
window.location = someElement.get('data-url');
});
…但這有時會有很糟的用戶體驗(yàn), 當(dāng)按住CTRL鍵(Mac是COMMAND鍵),再用鼠標(biāo)點(diǎn)擊時,它會在同一個(標(biāo)簽頁)窗口內(nèi)打開鏈接。知道有這個問題,你肯定想到了該如何去解決.我們修改一小點(diǎn)代碼就能達(dá)成這個目的,趕快花點(diǎn)時間去修復(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)了這個功能,在使用window.location進(jìn)行頁面重定向時你也應(yīng)該記得這一點(diǎn)。這是一個很小的代碼改進(jìn),但對可用性的提高卻是非常重要的!
相關(guān)文章
極力推薦一款小巧玲瓏的可視化編輯器bootstrap-wysiwyg
這篇文章主要為大家極力推薦一款小巧玲瓏的可視化編輯器bootstrap-wysiwyg，是一款基于jquery和bootstrap的可視化編輯器，感興趣的小伙伴們可以參考一下2016-05-05
JavaScript(js)處理的HTML事件、鍵盤事件、鼠標(biāo)事件簡單示例
這篇文章主要介紹了JavaScript(js)處理的HTML事件、鍵盤事件、鼠標(biāo)事件,結(jié)合實(shí)例形式分析了JavaScript針對HTML事件、鍵盤事件及鼠標(biāo)事件的簡單處理方法,需要的朋友可以參考下2019-11-11
一文讓您了解document.forms和document.formName的兼容性分析
今天在代碼中不小心寫了兩個name相同的form表單,然后通過document.forms[formName]形式獲取到的只有第一個表單,然后深入學(xué)習(xí)了下document.forms[formName]和document.formName的區(qū)別和兼容性2025-03-03
js實(shí)現(xiàn)七夕表白彈幕效果 jQuery實(shí)現(xiàn)彈幕技術(shù)
這篇文章主要介紹了js實(shí)現(xiàn)七夕表白彈幕效果，jQuery實(shí)現(xiàn)彈幕技術(shù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-08-08
JS實(shí)現(xiàn)點(diǎn)擊網(wǎng)頁判斷是否安裝app并打開否則跳轉(zhuǎn)app store
這篇文章主要介紹了JS實(shí)現(xiàn)點(diǎn)擊網(wǎng)頁判斷是否安裝app并打開否則跳轉(zhuǎn)app store的相關(guān)資料,非常不錯，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-11-11
本章節(jié)討論使用ES6編碼風(fēng)格到代碼中需要注意的點(diǎn)。通過記住這些關(guān)鍵點(diǎn)，可以讓我們寫出更優(yōu)美的、可讀性更強(qiáng)的JavaScript ES6風(fēng)格的代碼。2021-05-05
這篇文章主要介紹了JavaScript中包裝對象的一些知識點(diǎn)，包括內(nèi)置對象等2013-08-08
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)戰(zhàn)之菜單特效實(shí)現(xiàn)代碼，具有與一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-08-08
JavaScript實(shí)現(xiàn)頁面5秒后自動跳轉(zhuǎn)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)頁面5秒后自動跳轉(zhuǎn)的方法,涉及javascript遞歸調(diào)用與計(jì)時函數(shù)setTimeout的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了詳解從0開始搭建微信小程序(前后端)的全過程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-04-04