JavaScript 阻止超鏈接跳轉(zhuǎn)的操作方法(多種寫法)
通過JavaScript,我們可以阻止超鏈接的跳轉(zhuǎn)。
方法如下:
(1)操作超鏈接的 href 屬性
寫法一:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <a href="javascript:void(0);" rel="external nofollow" >超鏈接</a> </body> </html>
寫法二:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <a href="javascript:;" rel="external nofollow" >超鏈接</a> </body> </html>
點(diǎn)擊鏈接,鏈接并不會進(jìn)行跳轉(zhuǎn)。
(2)阻止鏈接的默認(rèn)行為
寫法一:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <a rel="external nofollow" rel="external nofollow" >百度</a> <script> var link = document.querySelector("a"); link.addEventListener('click',function(e){ e.preventDefault(); }) </script> </body> </html>
寫法二:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <a rel="external nofollow" rel="external nofollow" >百度</a> <script> var link = document.querySelector("a"); link.onclick = function (e) { return false; } </script> </body> </html>
此時(shí),點(diǎn)擊超鏈接,也不會進(jìn)行跳轉(zhuǎn)。
以上就是JavaScript 阻止超鏈接跳轉(zhuǎn)的操作方法(多種寫法)的詳細(xì)內(nèi)容,更多關(guān)于js超鏈接跳轉(zhuǎn)的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
JavaScript實(shí)現(xiàn)音樂導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)音樂導(dǎo)航效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11Webpack path與publicPath的區(qū)別詳解
本篇文章主要介紹了Webpack path與publicPath的區(qū)別詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-05-05javascript 具名函數(shù)的四種調(diào)用方式 推薦
看四種方式執(zhí)行結(jié)果沒有區(qū)別。但如果函數(shù)有返回值的話,用new方式調(diào)用時(shí)可能會讓你有些失望。2009-07-07從QQ網(wǎng)站中提取的純JS省市區(qū)三級聯(lián)動菜單
在瀏覽網(wǎng)頁過程中發(fā)現(xiàn)QQ自己的JS省市區(qū)三級聯(lián)動。所以研究了一下,就將其提取出來了。他的界面如下,喜歡的朋友可以學(xué)習(xí)下2013-12-12