阻止超链接默认的跳转用: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>