在学习《javascript基础教程》第八版时,有一个小细节开始不是很明白,查了一些资料后,理了一下思路。
例子的html代码:
<!DOCTYPE html> <html> <head> <title>Rotating Banner with Links</title> <script src="script08.js"></script> <link rel="stylesheet" href="script01.css"> </head> <body> <div class="centered"> <a href="linkPage"><img src="images/banner1.gif" id="adBanner" alt="ad banner"></a> </div> </body> </html>
例子的js代码:
window.onload = initBannerLink; var thisAd = 0; function initBannerLink() { if (document.getElementById("adBanner").parentNode.tagName == "A") { document.getElementById("adBanner").parentNode.onclick = newLocation; } rotate(); } function newLocation() { var adURL = new Array("negrino.com","sun.com","microsoft.com"); document.location.href = "http://www." + adURL[thisAd]; return false; } function rotate() { var adImages = new Array("images/banner1.gif","images/banner2.gif","images/banner3.gif"); thisAd++; if (thisAd == adImages.length) { thisAd = 0; } document.getElementById("adBanner").src = adImages[thisAd]; setTimeout(rotate, 3 * 1000); }
a本身会触发一个链接,a的onclick会触发一个链接,onclick事件执行后会触发a本身的链接,为了阻止a本身链接的触发,需要对onclick事件的函数返回false。
return true:返回正常的处理结果。
return false:返回错误的处理结果;终止处理;阻止提交表单;阻止执行默认的行为。
return:把控制权返回给页面。
若将html代码中的
<a href="linkPage"><img src="images/banner1.gif" id="adBanner" alt="ad banner"></a>
改为:
<a href="#"><img src="images/banner1.gif" id="adBanner" alt="ad banner"></a>
此时去掉js代码中的return false,也可以实现同样的效果。