JavaScript阻止超链接默认的跳转

最新推荐文章于 2025-03-15 14:37:20 发布

原创最新推荐文章于 2025-03-15 14:37:20 发布 · 4.3k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

JavaScript 专栏收录该内容

57 篇文章

订阅专栏

本文介绍了三种使用JavaScript阻止超链接默认跳转行为的方法，并通过一个案例展示了如何在点击缩略图时显示大图而非跳转到大图链接。

阻止超链接默认的跳转用：return false;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--方法一-->
<a href="http://www.baidu.com" onclick="alert('跳不动'); return false;">百度</a>
<br/>
<!--方法二-->
<a href="http://www.baidu.com" onclick="return fn()">百度</a>
<script>
    function  fn(){
        alert("跳不动呀");
        return false;
    }
</script>
<br/>
<!--方法三（推荐）-->
<a href="http://www.baidu.com" id="bai">百度</a>
<script>
    document.getElementById('bai').onclick = function(){
        alert("跳不动呀跳不动");
        return false;
    }
</script>
</body>
</html>

案例：点击小图，显示大图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="bigDog.jpg" id="ak"><img src="smallDog.jpg" alt=""></a>
<img src="" alt="" id="big">
<script>
    document.getElementById("ak").onclick =function () {
        document.getElementById("big").src=this.href;
        return false;
    }
</script>
</body>
</html>