JavaScript 阻止超链接跳转的多种实现方式
作者：纸飞机时间：2026-10-24 12:22:54浏览：589
本文详细介绍在JavaScript中阻止超链接跳转的两种主要方法：一是直接修改a标签的href属性为javascript:void(0)或空值；二是通过事件监听器调用preventDefault()或在onclick事件中返回false。文章提供了完整的HTML与JS代码示例，帮助开发者快速实现链接点击无跳转效果。
JavaScript 阻止超链接跳转的多种实现方式
利用JavaScript技术，可以有效控制并阻止网页中超链接的默认跳转行为。
实现这一功能主要包含以下两种核心思路：
第一种方式是通过直接操作超链接元素的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>另一种写法同样通过修改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:;" 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="https://www.baidu.com" 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 href="https://www.baidu.com" rel="external nofollow" rel="external nofollow" >百度</a>
<script>
var link = document.querySelector("a");
link.onclick = function (e) {
return false;
}
</script>
</body>
</html>
采用上述方式处理后，点击超链接同样不会发生页面跳转。
以上内容总结了JavaScript中阻止超链接跳转的多种具体写法，如需了解更多关于JS控制超链接跳转的相关信息，建议关注本站发布的其他技术文章。
作者最新文章
JS动态构建复杂嵌套JSON对象的方法
2026-11-05 15:41:52
JS负数取余为什么是负数？详解余数与模运算区别
2026-11-05 13:34:41
JS 解压出现乱码或报错怎么解决？
2026-11-05 12:32:38
JS 中 startsWith、indexOf 与正则判断字符串前缀的对比
2026-11-04 22:19:43
JS解析Excel后怎么将数据转换为JSON格式
2026-11-04 20:58:28