Question

我遇到了一个触发错误对象的事件监听器的问题。

要查看它，请点击一个td，其数字低于'Min'

这是完整的js代码：

var minedit = document.getElementsByClassName('min-edit');
     for (var m=0;m<minedit.length;m++){
        minedit[m].addEventListener('click', edit);
     }
    
    function edit(){
        this.removeEventListener('click', edit);
        var avalue = this.innerHTML;
    
        if (this.className.indexOf('input-open')>=0){
    
 
    }
    
    else {
        this.className += 'input-open';
        var content = '';
        content += '<div class="input-group editable-input"><input type="text" id="minedit'+this.parentNode.childNodes[1].id+'" value="'+parseFloat(avalue).toFixed(2)+'" class="form-control"><span class="input-group-addon editable-input" id="savethis"><i class="ion-android-done" ></i></span><span class="input-group-addon editable-input"><i class="ion-android-close" id="close"></i></span></span></div>';
        this.innerHTML = content;
    
     
        var valuenow = document.getElementById('minedit'+this.parentNode.childNodes[1].id).value;
        var id = document.getElementById('minedit'+this.parentNode.childNodes[1].id).id;
    
        var save = document.getElementById('savethis');
        save.addEventListener('click', savethis(valuenow, id));
    
    
    }
    function savethis(v,id) {
    
        console.log(id.replace('minedit','')+'Button clicked: '+v);
    }
    
    }

这是fiddle

发生了什么：

这一行：

 var content = '';
 content += '<div class="input-group editable-input">
             <input type="text" id="minedit'+this.parentNode.childNodes[1].id+'" value="'+parseFloat(avalue).toFixed(2)+'" class="form-control">
             <span class="input-group-addon editable-input" id="savethis"><i class="ion-android-done" ></i></span>
             <span class="input-group-addon editable-input"><i class="ion-android-close" id="close"></i></span></span></div>';
 this.innerHTML = content;

我正在创建一个输入字段和两个跨度，其中一个带有id“savethis”。现在我在savethis上添加eventlistener：

 var valuenow = document.getElementById('minedit'+this.parentNode.childNodes[1].id).value;
 var id = document.getElementById('minedit'+this.parentNode.childNodes[1].id).id;

 var save = document.getElementById('savethis');
save.addEventListener('click', savethis(valuenow, id));

但是当innerHTML改变为输入字段时，调用函数savethis。单击“最小”TD之一时，您可以在fiddle中看到此信息。

有人可以帮我吗？为什么要调用的函数单击一行而不是单击跨度？

Answer 1

在addEventListener中，您调用savethis函数而不是在

中传递它

更改

save.addEventListener('click', savethis(valuenow, id));

到

save.addEventListener('click', savethis);

找到另一种在savethis函数中使用valueNow和id的方法。

这解释了如何传递参数：https://developer.mozilla.org/en/docs/Web/API/EventTarget.addEventListener

事件监听器触发错误的目标/函数在错误的时间执行

1 个答案: