<!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>