a链接的onclick与js中的return false

时间：2022-01-24 09:57:20
在学习《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="data: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="data:images/banner1.gif" id="adBanner" alt="ad banner"></a>
改为：
 <a href="#"><img src="data:images/banner1.gif" id="adBanner" alt="ad banner"></a>
此时去掉js代码中的return false，也可以实现同样的效果。

相关文章