非墨非墨

 

a链接的onclick与js中的return false 

在学习《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，也可以实现同样的效果。

posted on 2016-10-13 20:21  非墨非墨  阅读(2399)  评论(0)  编辑  收藏  举报

导航