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