【问题标题】:addEventListener in Javascript triggers the click event automaticallyJavascript 中的 addEventListener 自动触发点击事件
【发布时间】:2012-07-14 10:34:11
【问题描述】:

我想做一个简单的javascript倒计时程序。出于某种原因,我无需单击开始链接即可触发倒计时。

<!DOCTYPE HTML>
<html>
    <head>
        <title id = "titleElement">My Top Ten Movies</title>

    </head>

    <body>

        <p>Countdown Suren's favorite ten movies
            <a href="" id = "start"> Start </a>
        </p>

        <table>

            <thead>
                <tr>
                    <td>Number</td>
                    <td>Movie</td>
                </tr>   
            </thead>

            <tbody id = "movieList">

            </tbody>

        </table>

    <script src="js/practice.js"></script>  
    </body>
</html>

还有我的 JavaScript 文件...

//get the start element
var start = document.getElementById("start");

//register listener
start.addEventListener('click', startCountDown(), false);


function startCountDown()
{
    //alert("Here!");
    //creat the list of 10 movies
    var myTenMovies = ["Breaveheart", "Mars Attacks", "Startship Troopers", "Jurassic Park", "Terminator 2",
                        "Austion Powers: Gold Member", "Fifth Element", "Bram Stocker's Dracula",
                        "Shashank Redemption", "LOTR: Return Of The King"];

    //get the location in the DOM to add each movie
    var tableLocation = document.getElementById("movieList");

    //create a timer function
    var countdown = setInterval(insertNextMovie, 750);

    //keep track of the index
    var index = 0;
    var movieRankIndex = 10;
    //alert("1");


    //function to add to DOM
    function insertNextMovie()
    {
        //alert("Here3!");
        //create a text nodes
        var movie = document.createTextNode(myTenMovies[index]);
        var rank = document.createTextNode(movieRankIndex);

        //create <td> element
        var rankData = document.createElement("td");
        var movieTitle = document.createElement("td");
        var row = document.createElement("tr");

        //add text to td
        rankData.appendChild(rank);
        movieTitle.appendChild(movie);

        //fill the row with data
        row.appendChild(rankData);
        row.appendChild(movieTitle);

        if(movieRankIndex == 1)
        {
            row.setAttribute("bgcolor", "yellow");
            //row.setAttribute("align", "right");
        }
        //add td to DOM table
        tableLocation.appendChild(row);

        //append index
        index++;
        movieRankIndex--;

        if(index == 10)
        {
            clearInterval(countdown);
        }

    }

    //alert("2");
}

【问题讨论】:

    标签: javascript javascript-events


    【解决方案1】:

    这是因为startCountDown() 调用了函数startCountDown。去掉括号,就可以了。

    【讨论】:

    • 我删除了括号,它不再自动运行,但现在我点击开始后什么都不做。
    • 这可能是锚中断执行。删除href属性或将其更改为#
    • 漂亮!! 1 为你前辈 Zirak!
    • @Suren:您可以接受答案(单击复选框,使其变为绿色)
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2011-01-23
    • 2023-03-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多