Question

我试图对子元素进行简单的onclick（没有jQuery）：

document.getElementById('link').children.onclick = function(){
    this.style.color="#ff0000";
}

我希望它为每个单击的元素将颜色更改为红色。我认为这种方法可行，但它不会。

Answer 1

这应该有效：

var childs = document.getElementById('link').children; //returns a HTMLCollection

for (var i = 0; i < childs.length; i++) { // iterate over it
    childs[i].onclick = function () {   // attach event listener individually
        this.style.color = "#ff0000";
    }
}

Demo

document.getElementById('someID').children返回HTMLCollection，因此您向HTMLCollection添加了onclick，结果证明是错误的。

Answer 2

你必须使用一个循环，如果你不想引入新的变量，你可以这样做：

[].forEach.call(document.getElementById('link').children, function(e) {
    e.onclick = function () {
        this.style.color = "#ff0000";
    }
});

<强> The WORKING DEMO

Javascript onclick孩子

2 个答案: