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>

猜你喜欢

转载自blog.csdn.net/sleepwalker_1992/article/details/80836242
今日推荐