zoukankan      html  css  js  c++  java
  • 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,也可以实现同样的效果。
  • 相关阅读:
    dp周训练 状态压缩
    计算几何 点对处理 #345 (Div. 2) C. Watchmen
    Codeforces Round #303 (Div. 2) D. Queue 水题贪心
    TTTTTTTTTTTTT 树的直径 Codeforces Beta Round #14 (Div. 2) D. Two Paths
    TTTTTTTTTTTTT CF Good Bye 2015 C- New Year and Domino(CF611C) 二维前缀
    巨蟒python全栈开发数据库前端8:jQuery框架2
    计时器练习
    onload事件,解决不能在head写代码
    js引入方式的弹框方法2
    pycharm中格式标准化代码
  • 原文地址:https://www.cnblogs.com/yangfang228/p/5957939.html
Copyright © 2011-2022 走看看