Javascript 回调函数触发两次

Question

我有四个输入，我想向其中添加一个事件。

我在 HTMLCollective 上创建了一个新函数

HTMLCollection.prototype.eachOnClick = function(callback){
    var len = this.length
    var j = 0
    for(var i = 0; i < len; i++){
        let elem = this.item(i)
        document.addEventListener('click', () => {
            callback(elem)
        })
    }
}

document.getElementsByClassName('blog-search-filters').eachOnClick(function(elem){
    // if elem.checked do something
    // else do something else
    console.log(elem);
})

<div class="blog-search-filters">a</div>
<div class="blog-search-filters">b</div>

问题是，单击其中一项后，所有四个输入回调都会运行两次，因此回调函数被调用 8 次。

我在这里缺少什么？

非常感谢任何帮助。

干杯

Answer 1

似乎您需要处理元素click，而不是文档。

HTMLCollection.prototype.eachOnClick = function(callback){
    var len = this.length
    var j = 0
    for(var i = 0; i < len; i++){
        let elem = this.item(i);

        //use elem reference here 
        elem.addEventListener('click', () => {
            callback(elem)
        })
    }
}