JavaScript中給onclick綁定事件后return false遇到的問題


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

  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM