關(guān)于Javascript圖片庫(kù)改進(jìn)的問(wèn)題

最近在學(xué)習(xí)Javascript編程的藝術(shù)，其中有一章節(jié)說(shuō)的是圖片庫(kù)的問(wèn)題，實(shí)現(xiàn)點(diǎn)擊鏈接，在網(wǎng)頁(yè)不跳轉(zhuǎn)的情況下，更換下方的圖片的效果。

現(xiàn)在有一個(gè)問(wèn)題，當(dāng)我點(diǎn)擊按鈕，網(wǎng)頁(yè)會(huì)跳轉(zhuǎn)，我也在匿名函數(shù)里寫(xiě)了點(diǎn)擊返回false的，為什么還會(huì)跳轉(zhuǎn)呢？求助，求助，謝謝！

以下是代碼：
<!DOCTYPE html>
<html>

<head>
   <title>Snapshots</title>
   <meta charset="utf-8">
</head>
<body>
   <h1>Snapshots</h1>
   <ul id="imageGallery">
     <li><a href="images/1.png" title="A red house">Red house</a></li>
     <li><a href="images/2.png" title="A blue house">blue house</a></li>
     <li><a href="images/3.png" title="A white house">white house</a></li>
     <li><a href="images/4.png" title="A brown house">brown house</a></li>
     <img id="placeholder" src="images/placeholder.png" alt="占位符">
             <p id="description">choose an image.</p>
   </ul>
   <script>
             function prepareGallery() {
                 if (!document.getElementsByTagName) {return false;}
                 if (!document.getElementById) {return false;}
                 if (!document.getElementById("imageGallery")) {return false;}
                 var gallery = document.getElementById("imageGallery");
                 var links = gallery.getElementsByTagName("a");
                 for (var i=0; i<links.length; i++){
                     links[i].onclick = function(){
                        showPic(this);
                        return false; //屏蔽游覽器跳轉(zhuǎn)的行為
                     }
                 }
             }
             
     function showPic(whichpic){
                 if (!document.getElementById("placeholder")) {return false;}
                 var source = whichpic.getAttribute("href");
                 var placeholder = document.getElementById("placeholder");
                 placeholder.setAttribute("src",source);
                 if (document.getElementById("description")){
                      var get_title = whichpic.getAttribute("title");
                   var description = document.getElementById("description");
                   description.firstChild.nodeValue = get_title;
                 }
                 return true; 
             }
   </script>

</body>
</html>

回答

編輯回答

解夏

實(shí)質(zhì)是你的prepareGallery函數(shù)沒(méi)有執(zhí)行過(guò)，所以沒(méi)有起效果。
你在下面執(zhí)行，或者聲明后馬上執(zhí)行就可以：

(function prepareGallery() {
                 if (!document.getElementsByTagName) {return false;}
                 if (!document.getElementById) {return false;}
                 if (!document.getElementById("imageGallery")) {return false;}
                 var gallery = document.getElementById("imageGallery");
                 var links = gallery.getElementsByTagName("a");
                 for (var i=0; i<links.length; i++){
                     links[i].onclick = function(){
                        showPic(this);
                        return false; //屏蔽游覽器跳轉(zhuǎn)的行為
                     }
                 }
             })();  //這里立即執(zhí)行了函數(shù)。

2017年7月10日 20:41

編輯回答