javascript - onClick 在没有被点击的情况下关闭

Question

我刚开始使用 JavaScript 编写代码，正在创建一个基本的选项卡导航界面作为原型(prototype)/实践。现在，我正在尝试使用 onclick 事件处理程序在无序列表的链接上显示一个警报，就像测试一样，但无法弄清楚。每次我加载页面时，所有 5 个 onclick 事件都会在没有单击任何内容的情况下发生。查看代码，如果您有任何建议，请告诉我:

window.onload = initAll;
var xhr = false;

function initAll () {
    var navDiv = document.getElementById("tab_navigation");
    var navTabs = navDiv.getElementsByTagName("a");

    for (var i = 0; i < navTabs.length; i++) {
        navTabs[i].onclick = tellTab(i);
    }
}


function tellTab (number) {
    number = number + 1;
    alert("You clicked tab number " + number);
}

HTML结构如下:

    <div id="tab_navigation">
        <ul>
            <li><a href="#1">Tab 1</a></li>
            <li><a href="#2">Tab 2</a></li>
            <li><a href="#3">Tab 3</a></li>
            <li><a href="#4">Tab 4</a></li>
            <li><a href="#5">Tab 5</a></li>
        </ul>
    </div>   

Answer 1

在 for 循环中，您有这一行:

navTabs[i].onclick = tellTab(i);

立即调用 tellTab。您可以做的是让 tellTab 返回一个闭包，如下所示:

function tellTab (number) {
    return function() {
        // I commented out the following line
        // because I don't think it's necessary.
        //number = number + 1; 
        alert("You clicked tab number " + number);
    };
}

另一种选择是在 for 循环中创建一个闭包:

for (var i = 0; i < navTabs.length; i++) {
    (function(i) {
        navTabs[i].onclick = function() {
            tellTab(i);
        };
    })(i);
}