JavaScript 阻止超鏈接跳轉(zhuǎn)的操作方法(多種寫法)
更新時間：2021年06月19日 14:22:17 作者：亂舞春秋__
很多朋友問小編能否通過JavaScript來阻止超鏈接的跳轉(zhuǎn)呢，今天給大家通過多種寫法來實現(xià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>
點擊鏈接，鏈接并不會進行跳轉(zhuǎn)。
（2）阻止鏈接的默認行為
寫法一：
<!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>
此時，點擊超鏈接，也不會進行跳轉(zhuǎn)。
以上就是JavaScript 阻止超鏈接跳轉(zhuǎn)的操作方法(多種寫法)的詳細內(nèi)容，更多關(guān)于js超鏈接跳轉(zhuǎn)的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
js獲取TreeView控件選中節(jié)點的Text和Value值的方法
在實際項目中，遇到一個問題，首先彈出一個新窗口，新窗口中放了一個TreeView控件，現(xiàn)在要解決的是，如何單擊TreeView中一個節(jié)點，返回Text和Value到父頁面并關(guān)閉該新窗口,本文將詳細介紹此方法的實現(xiàn)2012-11-11
這篇文章主要幫助大家理解javascript中DOM事件，解決了DOM事件的兼容性，DOM事件的冒泡，以及DOM事件的重用，感興趣的小伙伴們可以參考一下2015-12-12
javascript window.onerror事件學(xué)習(xí)新收獲
javascript window.onerror事件學(xué)習(xí)新收獲...2007-11-11
傳統(tǒng)的javascript中只有對象,沒有類的概念,下面這篇文章主要給大家介紹了關(guān)于ES6?class類實現(xiàn)繼承的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-10-10
理解Javascript_01_理解內(nèi)存分配原理分析
在正式開始之前，我想先說兩句，理解javascript系列博文是通過帶領(lǐng)大家分析javascript執(zhí)行時的內(nèi)存分配情況，來解釋javascript原理，具體會涵蓋javascript預(yù)加載，閉包原理，面象對象，執(zhí)行模型，對象模型...,文章的視角很特別，也非常深入，希望大家能接受這種形式，并提供寶貴意見。2010-10-10
這篇文章主要為大家詳細介紹了一道極易被忽視的javascript面試題七問七答，感興趣的小伙伴們可以參考一下2016-02-02
JS實現(xiàn)鏈表數(shù)據(jù)結(jié)構(gòu)的代碼詳解
很多前端的同學(xué)對數(shù)據(jù)結(jié)構(gòu)和算法這塊沒有太多的概念,很多l(xiāng)eetcode的題目看不懂,有時候可能看了題解也不知道是什么意思,這篇文章咱們來簡單的談一談鏈表,文中給大家介紹了JS實現(xiàn)鏈表數(shù)據(jù)結(jié)構(gòu)的示例代碼,需要的朋友可以參考下2024-01-01
這篇文章主要為大家詳細介紹了基于JavaScript實現(xiàn)帶縮略圖的輪播效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-01-01
如何將一維度數(shù)組轉(zhuǎn)換成三維數(shù)組結(jié)構(gòu)
在開發(fā)過程中,可能會遇到需要將一維數(shù)組轉(zhuǎn)換為多維數(shù)組的情況,以滿足特定數(shù)據(jù)結(jié)構(gòu)的需求,文章介紹了如何將后端返回的一維列表數(shù)據(jù)通過編程方法轉(zhuǎn)換成三維數(shù)組結(jié)構(gòu),以適應(yīng)特定的UI展示需求,通過循環(huán)遍歷和數(shù)據(jù)重組的方式,可以有效地實現(xiàn)數(shù)組結(jié)構(gòu)的轉(zhuǎn)換2024-09-09
這篇文章主要介紹了Hammer.js+輪播原理實現(xiàn)簡潔的滑屏功能的相關(guān)資料,需要的朋友可以參考下2016-02-02