前端阻止点击超链接跳转的方法

小小红色无花果

于 2022-11-21 00:10:32 发布

阅读量1.7k

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_45096939/article/details/127956698

版权

有三种写法，都在代码里了，主要是在点击方法中添加 return false实现超链接不跳转。

<!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>阻止超链接跳转</title>
</head>

<body>
    <!-- 第一种写法 -->
    <!-- <a href="http://www.baidu.com" onclick="alert('哎呀我被点了'); return false;">百度一下</a> -->


    <!-- 第二种写法 -->
    <!-- <script>
        function f1() {
            alert("哈哈，点到我了~");
            return false;
        }
    </script>
    <a href="http://www.baidu.com" onclick="return f1();"> 百度</a> -->


    <!-- 第三种写法 -->
    <a href="http://www.baidu.com" id="ak"> 百度</a> 
    <script>
        document.getElementById("ak").onclick=function(){
            alert("嘿嘿，又被点了");
            return false;
        }
    </script>
    
</body>

</html>