运行函数onclick.正在单击的所有按钮

Running functions onclick. All buttons being clicked

本文关键字：按钮 单击 函数 onclick 运行      更新时间：2023-09-26

我有很多按钮都有class="clearSelect"。我想让这些按钮在点击时执行一个函数。我是javascript的新手，不太确定为什么会发生这种情况，但我认为我的函数正在执行，而不是只执行onclick

下面的代码调用了我的所有其他函数，导致每个按钮都被点击。

代码：

var buttons = document.getElementsByClassName("clearSelect");  // objects with class="clearSelect"
for (var i = 0; i < buttons.length; i++) {
    var button = buttons[i];
    // button.addEventListener("onclick", clearOrSelectAll(button.id));
    button.onclick = clearOrSelectAll(button.id);
}

这些是被调用的函数：

function clearOrSelectAll(btn) {
    var cleartab = clearButtonSet[btn];
    var selecttab = selectButtonSet[btn];
    // console.log("clicked!");
    if (cleartab != null) {
        getOSList(cleartab, false);
    } else {
        getOSList(selecttab, true);
    }
}
function getOSList(tabVal, fate) {
    var configTab = document.getElementById(tabVal);
    var browserList = configTab.getElementsByClassName("browser_list");
    // var idObjs = browserList.getElementsByTagName("li");
    for (var h = 0; h < browserList.length; h++) {
        var idObjs = browserList[h].getElementsByTagName("li");
        // console.log(h);
        // console.log(idObjs);
        // select all
        if (fate) {
            for (var i = 0; i < idObjs.length; i++) {
                if (configs[idObjs[i].id] == null) {
                    idObjs[i].className = "selected";
                    configs[idObjs[i].id] = config_dictionary[idObjs[i].id];
                }
            }
        // clear all
        } else {
            for (var j = 0; j < idObjs.length; j++) {
                if (configs[idObjs[j].id] == null) {
                    idObjs[j].className = "unselected";
                    delete configs[idObjs[j].id];
                }
            }
        }
    }
}

@Christopher非常接近，但button.id应该是this.id。

button.onclick = function() {
  clearOrSelectAll(this.id);
}

button.id不起作用的原因可以用以下代码来证明：

var buttons= document.getElementsByTagName('button');
for (var i = 0; i < buttons.length; i++) {
  var button = buttons[i];
  button.onclick = function() {
    alert(button.id);
  }
}
<button id="B1">Button 1</button>
<button id="B2">Button 2</button>
<button id="B3">Button 3</button>

每个按钮都返回"B3"，因为这是变量button分配给的最后一个对象。

在for循环中，当您将事件附加到所有按钮时，您正在调用clearOrSelectAll函数。您可能希望将它封装在一个匿名函数中，以确保它只在事件触发时被调用。

// Non-ideal solution: see edit
button.onclick = function() {
    clearOrSelectAll(button.id);
}

EDIT:有人指出，当通过onclick属性或addEventListener方法附加事件处理程序时，"this"上下文变量将指向有问题的元素。因此，如果你引用它，而不是使用"button"作为闭包，并指望javascript引擎不要过多地优化你的循环，它可能会更干净（更容易阅读）（因为这会在调用事件时扰乱"按钮"的值。

button.onclick = function() {
    clearOrSelectAll(this.id);
};
相关文章：