JavaScript 阻止超鏈接跳轉(zhuǎn)的操作方法(多種寫法)
更新時(shí)間：2021年06月19日 14:22:17 作者：亂舞春秋__
很多朋友問(wèn)小編能否通過(guò)JavaScript來(lái)阻止超鏈接的跳轉(zhuǎn)呢，今天給大家通過(guò)多種寫法來(lái)實(shí)現(xiàn)這一功能，具體實(shí)例代碼跟隨小編一起看看吧
通過(guò)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)擊鏈接，鏈接并不會(huì)進(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)擊超鏈接，也不會(huì)進(jìn)行跳轉(zhuǎn)。
以上就是JavaScript 阻止超鏈接跳轉(zhuǎn)的操作方法(多種寫法)的詳細(xì)內(nèi)容，更多關(guān)于js超鏈接跳轉(zhuǎn)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
JavaScript實(shí)現(xiàn)音樂(lè)導(dǎo)航效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)音樂(lè)導(dǎo)航效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)時(shí)間選擇，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了php，js，css字符串截取的辦法，其實(shí)沒(méi)有什么技術(shù)含量，就是記錄一下，方便自己復(fù)習(xí)鞏固，希望對(duì)大家能有所幫助2014-09-09
Webpack path與publicPath的區(qū)別詳解
本篇文章主要介紹了Webpack path與publicPath的區(qū)別詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-05-05
這篇文章主要介紹了微信小程序wepy框架筆記小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
不錯(cuò)的Javascript表格翻頁(yè)效果...2007-08-08
javascript 具名函數(shù)的四種調(diào)用方式 推薦
看四種方式執(zhí)行結(jié)果沒(méi)有區(qū)別。但如果函數(shù)有返回值的話，用new方式調(diào)用時(shí)可能會(huì)讓你有些失望。2009-07-07
從QQ網(wǎng)站中提取的純JS省市區(qū)三級(jí)聯(lián)動(dòng)菜單
在瀏覽網(wǎng)頁(yè)過(guò)程中發(fā)現(xiàn)QQ自己的JS省市區(qū)三級(jí)聯(lián)動(dòng)。所以研究了一下，就將其提取出來(lái)了。他的界面如下，喜歡的朋友可以學(xué)習(xí)下2013-12-12
這篇文章主要介紹了使用webpack編譯es6代碼的方法步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-04-04
下面小編就為大家?guī)?lái)一篇?dú)w納下js面向?qū)ο蟮膸追N常見寫法總結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08