为所有先前实例的实例火灾设置的Javascript类事件

我有一个类，它为每个LI创建

mousedown

侦听器。但是，单击第一个实例的LI会导致为其后创建的每个LI实例触发事件。如果创建第三个实例，单击第一个实例将导致所有3次触发，单击第二个实例将导致第二次和第三次触发，以此类推

要复制，请运行JSFIDLE并单击两个链接（一个接一个），这将创建两个UL元素，每个UL元素包含一个LI元素<代码>警报（）设置为显示每个事件触发。如果继续单击链接，您将看到事件是如何继续堆叠的

我不熟悉用javascript创建类，所以我显然错过了一些东西，但我不明白为什么多个实例的事件不是分开的。如果你想知道的话，我已经创建了我的类，以允许静态变量和方法。我没有使用jQuery

我已经发了

更新 修复了因削减复杂代码而导致的错误。我已经进行了更新，以反映每个UL中创建的多个LI元素（数字是动态的，由db驱动），并且ID是唯一的

<div id="outer">
    <a href="#" onclick="edit('g123')">Click here first id=g123</a>
    <br> 
    <a href="#" onclick="edit('g234')">Click here second id=g234</a>
</div>    
    
<script>

listbox = (function (id) {
        var currentul = "";
        var counter = 0;
    
        function listbox(id) {
            this.id = id;
        };
    
        // show or hide once all the properties are set
        listbox.prototype.go = function () {
            this.initlistbox();
            this.addlisteners();
        }
    
        // create the elements for drag and drop between two list boxes
        listbox.prototype.initlistbox = function () {
            var _this = this;
            var divlist = document.createElement('div');
            divlist.style.minHeight = '100px';
            divlist.style.width = '300px'
            divlist.style.outline = '1px solid blue'
    
            // the UL
            var ul = document.createElement('ul');
            ul.setAttribute('id', 'ulchosen-' + this.id);
    
            // track which UL is active for keystrokes
            ul.addEventListener('click', function (e) {
                if (e.stopPropagation) e.stopPropagation();
                currentul = this.id;
            }, false);
    
            // add the ul to the div
            divlist.appendChild(ul);
    
            divouter = document.getElementById("outer");
            // add the div to the body
            divouter.appendChild(divlist);
    
            // The LI
            // create LI elements
            for (i=0; i < 4; i++){
                var li = document.createElement('li');
                counter++;
                li.setAttribute('id', 'lb-li-chosen-' + counter);
                li.innerHTML = "Hello " + counter + " " + this.id;
                ul.appendChild(li);
            }    
        };
    
        listbox.prototype.addlisteners = function () {
            var _this = this;
    
            var lis = document.querySelectorAll("[id^='lb-li-']");
            for (var i = 0; i < lis.length; i++) {
                this.setlilisteners(lis[i]);
            }
        };
    
        listbox.prototype.setlilisteners = function (el) {
            var _this = this;
    
            // click is for non drag, non shift / ctrl
            el.addEventListener('click', function (e) {
                alert("A: " + _this.id);
                e.preventDefault();
                return false;
            }, false);
    
            // mousedown is to select LI elements
            el.addEventListener('mousedown', function (e) {
                e.stopPropagation();
                e.preventDefault();
                alert("B: " + _this.id);
                return false;
            }, false);
    
        };
    
        return listbox;
    })();
    
    function edit(id) {
        var a = new listbox(id);
        a.go();
    } 
</script>

listbox=（函数（id）{
var currentul=“”；
var计数器=0；
函数列表框（id）{
this.id=id；
};
//设置所有属性后显示或隐藏
listbox.prototype.go=函数（）{
this.initlistbox（）；
this.addlisteners（）；
}
//在两个列表框之间创建拖放元素
listbox.prototype.initlistbox=函数（）{
var_this=这个；
var divlist=document.createElement（'div'）；
divlist.style.minHeight='100px'；
divlist.style.width='300px'
divlist.style.outline='1px纯蓝色'
//联邦制药
var ul=document.createElement（'ul'）；
ul.setAttribute（'id'，'ulselected-'+this.id）；
//跟踪哪个UL对击键有效
ul.addEventListener（'click'，函数（e）{
如果（e.stopPropagation）e.stopPropagation（）；
currentul=this.id；
}，假）；
//将ul添加到div
子目录（ul）；
divouter=document.getElementById（“外部”）；
//将div添加到主体中
divouter.appendChild（divlist）；
//黎族
//创建LI元素
对于（i=0；i<4；i++）{
var li=document.createElement（'li'）；
计数器++；
li.setAttribute（'id'，'lb li selected-'+计数器）；
li.innerHTML=“Hello”+counter+”“+this.id；
ul.儿童（li）；
}    
};
listbox.prototype.addlisteners=函数（）{
var_this=这个；
var lis=document.queryselectoral（“[id^='lb-li-']”）；
对于（变量i=0；i

每次使用

addEventListener

时，都会堆叠一个新函数以供执行

addEventListener

不会删除旧函数。所以每个元素只需要调用一次

下面的代码将起作用

listbox = (function (id) {
    var currentul = "";

    function listbox(id) {
        this.id = id;
    };

    // show or hide once all the properties are set
    listbox.prototype.go = function () {
        this.initlistbox();
    }

    // create the elements for drag and drop between two list boxes
    listbox.prototype.initlistbox = function () {
        var _this = this;
        var divlist = document.createElement('div');
        divlist.style.minHeight = '100px';
        divlist.style.width = '300px'
        divlist.style.outline = '1px solid blue'

        // the UL
        var ul = document.createElement('ul');
        ul.setAttribute('id', 'ulchosen-' + this.id);

        // track which UL is active for keystrokes
        ul.addEventListener('click', function (e) {
            if (e.stopPropagation) e.stopPropagation();
            currentul = this.id;
        }, false);

        // add the ul to the div
        divlist.appendChild(ul);

        divouter = document.getElementById("outer");
        // add the div to the body
        divouter.appendChild(divlist);

        // The LI
        // create LI elements
        var li = document.createElement('li');
        li.setAttribute('id', 'lb-li-chosen-1');
        li.innerHTML = "Hello " + this.id;
        ul.appendChild(li);

        this.setlilisteners(li);

    };

    listbox.prototype.setlilisteners = function (el) {
        var _this = this;

        // click is for non drag, non shift / ctrl
        el.addEventListener('click', function (e) {
            alert("A: " + _this.id);
            e.preventDefault();
            return false;
        }, false);

        // mousedown is to select LI elements
        el.addEventListener('mousedown', function (e) {
            e.stopPropagation();
            e.preventDefault();
            alert("B: " + _this.id);
            return false;
        }, false);

    };

    return listbox;
})();

function edit(id) {
    var a = new listbox(id);
    a.go();
}

---

小提琴手正在创建具有相同id的多个LI元素

lb-LI-selected-1

，这是无效的HTML。在某些浏览器中，我认为这可能会导致查询选择器返回多个LI元素的数组，结果是每次调用

.addListeners

，都会向迄今定义的每个LI元素添加一个新的事件侦听器函数。

Gustavo的回答帮助我找到了错误。我没有过滤LI元素以只包含当前UL，因此对于每个额外的实例，都会再次设置所有LI元素的侦听器。他想告诉我这个。。。这就是：

   listbox.prototype.addlisteners = function () {
        var _this = this;

        var lis = document.querySelectorAll("[id^='lb-li-']");
        for (var i = 0; i < lis.length; i++) {
            // THIS IF STATEMENT WAS MISSING
            if (lis[i].parentNode.id.indexOf("-" + this.id) !== -1){
                this.setlilisteners(lis[i]);
            }
        }
    };

listbox.prototype.addlisteners=函数（）{
var_this=这个；
var lis=document.queryselectoral（“[id^='lb-li-']”）；
对于（变量i=0；i

谢谢。我修复了id问题，并展示了为每个UL创建多个LI元素。jsiddle也被更新了。我的js类当然要大得多，这是为了让它足够小，这样做。“任何帮助都将不胜感激。”古斯塔沃夫斯和我同意逻辑仍然是一样的

var lis=document.queryselectoral（“[id^='lb-li-']”）

仍然返回以前创建的每个LI元素的数组，因为以前创建的所有LI元素的id都以“lb LI-”开头。是的，这就是问题所在，但是您的帖子都没有指向该行代码，也没有您上次的评论那么清晰。但他们确实帮助我自己找到了答案，这就是为什么我发布了答案。再次感谢