<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>IMAGES</h1>
<ul>
<li>
<a href="x_0001.gif" title="x_0001" onclick="showPicture(this);return false;">ImageOne</a>
</li>
<img id="placeholder" src="demo.png" alt="demo" title="demo">
</ul>
</body>
<script>
function showPicture(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}
</script>
</html>
可以從上面代碼中看出我的目的：通過點擊鏈接，更換顯示的圖片，並且不會跳轉。
因為是一個a標簽，return false可以在點擊鏈接后不跳轉，但是，我覺得每次綁定事件的時候都要加上這么一句，為什么不直接將這一句return false寫在綁定的事件函數中（showPicture）呢，於是乎，我就試了一下，將代碼做了很微小的改動，如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>IMAGES</h1>
<ul>
<li>
<a href="x_0001.gif" title="x_0001" onclick="showPicture(this);">ImageOne</a>
</li>
<img id="placeholder" src="demo.png" alt="demo" title="demo">
</ul>
</body>
<script>
function showPicture(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
return false;
}
</script>
</html>
但是為什么點擊連接之后仍舊跳轉了呢？不是返回false了嗎？ 於是我懷疑綁定的showPicture並沒有執行，所以就在showPicture中加了一條alert，但是證明這個showPicture是執行了的！那是為什么呢?
后來我發現了原因，先不說哪里有問題，我們還是先看第一個正常的代碼，挑出了兩段代碼：
<a href="x_0001.gif" title="x_0001" onclick="showPicture(this);return false;">ImageOne</a>
<script>
function showPicture(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
}
</script>
請一定很仔細的看一下這個代碼中的onclick，你會發現先執行showPicture，這個沒毛病，然后，又return false，這里聽一下，回想一下，咱們編程的時候，會在什么地方使用return？？？？？
沒錯，就是在定義函數的時候，會用到return，嗯~~~~，是不是有一點思路了，其實這里的onclick可以理解為就是定義一個函數而已，並不是調用函數，因為調用函數是在觸發的時候，而這里只是在定義函數，那如果是下面這個寫法：
<a href="x_0001.gif" title="x_0001" onclick="showPicture(this);">ImageFour</a>
<script>
function showPicture(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
return false;
}
</script>
好好想一下，直接在showPicture中return false，是不是讓函數返回false，這個false返回給了誰呢？是onclick嗎？肯定不是，要不然就會成功了？那是返回給了誰呢？請看下面這個代碼：
<script>
function showPicture(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
return false;
}
function onclick(){
var result = showPicture(this);
}
</script>
懂了吧？還沒懂的話，就聽我亂解釋吧，定義onclick的時候，會調用showPicture函數，然后showPicture返回一個false，這個false不是返回給onclick事件，而是result，然而這個result並沒有返回給onclick呀，所以只要將這個result返回給onclick就OK了，如下面這段代碼：
<script>
function showPicture(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
return false;
}
function onclick(){
var result = showPicture(this);
return result;
}
</script>
這樣onclick才會接收到false，才不會跳轉。如果我們要直接在showPicture里面寫return 就要改一下a標簽的onclick，將showPicture的返回值返回，看清楚，是將返回值返回，所以正確的代碼如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>IMAGES</h1>
<ul>
<li>
<a href="x_0001.gif" title="x_0001" onclick="return showPicture(this);">ImageOne</a>
</li>
<img id="placeholder" src="demo.png" alt="demo" title="demo">
</ul>
</body>
<script>
function showPicture(whichpic){
var source = whichpic.getAttribute("href");
var placeholder = document.getElementById("placeholder");
placeholder.setAttribute("src",source);
return false;
}
</script>
</html>