<body>
<p id="main">
<ul>
<li><a href="./1.jpg" title="這是圖片一" onclick="showPic(this); return false;">圖片一</a></li>
<li><a href="./2.jpg" title="這是圖片二" onclick="showPic(this); return false;">圖片二</a></li>
<li><a href="./3.jpg" title="這是圖片三" onclick="showPic(this); return false;">圖片三</a></li>
</ul>
<img id="image" src="" />
<p id="description"></p>
</p>
<script type="text/javascript">
function showPic(element){
var image = document.getElementById("image");
var soure = element.getAttribute("href");
image.setAttribute("src",soure);
var text = element.getAttribute("title");
var description = document.getElementById("description");
description.firstChild.nodeValue = text;
}
</script>
</body>
return false后a標(biāo)簽還是會跳轉(zhuǎn),因?yàn)檫@句:description.firstChild.nodeValue = text;
把它注釋了就不會跳轉(zhuǎn),或者換成:description.innerHTML = text;
也不會跳轉(zhuǎn),這是什么情況呢?
還有一個問題是a標(biāo)簽的this默認(rèn)返回的是href屬性的值,比如上面的代碼中,可以直接變成這樣:image.setAttribute("src",element);
,不用寫成image.setAttribute("src",element.href);
或element.getAttribute("href");
,是因?yàn)閍標(biāo)簽本來就是必須帶href屬性(正常情況下)所以就自動返回這個值嗎?
光陰似箭催人老,日月如移越少年。
這個問題很有趣,初看覺得匪夷所思。馬上 COPY 了代碼嘗試了一下:
1.為什么 description.firstChild.nodeValue = text
會導(dǎo)致鏈接跳轉(zhuǎn)?
因?yàn)?description.firstChild
是 null
,也就是一個空對象。你修改 null
的屬性有什么作用?只會導(dǎo)致代碼拋出異常,不繼續(xù)向下執(zhí)行了。既然 JS 不繼續(xù)執(zhí)行了,那么 return false
就是失效的,也就是壓根沒有 return false
。所以瀏覽器接著做了點(diǎn)擊 a 標(biāo)簽的默認(rèn)行為,也就是跳轉(zhuǎn)到 href 的鏈接。
為什么 description.innerHTML = text;
沒問題?因?yàn)檫@句 JS 不會導(dǎo)致異常,會正常執(zhí)行下去,直到 return false
。
2.為什么 setAttribute
時,element
等價于 element.getAttribute("href")
?
如果你把 element.toString()
的結(jié)果打印出來就知道了,就是 href
的值。所以 setAttribute
的第二個參數(shù)會進(jìn)行一次 toString
處理,確保值會是一個字符串對象,然后再賦值給相應(yīng)屬性。
再次不得不說,你這個問題提得很有價值,我自己也學(xué)到了。