AddEventListener не правильно работает с классами
Может немного некорректно тему назвал, но все же..
Давайте для начала приведу код.. function Block(){ this.elem; this.create = function(id){ body.innerHTML += "<div id='"+id+"'></div>"; //бади написал просто что бы короче было this.elem = document.getElementById(id); this.elem.addEventListener("mousedown", function(){ console.log("Pressed") // То, что должно печататься при нажатии на блок },false); }; }; // Далее создаем эти блоки var block1 = new Block(); var block2 = new Block(); block1.create(1); //Тут обработчик события не работает вообще (но если не создавать block2, то работать будет). block2.create(2); //Тут обработчик события привязывается и работает. // Если изменить порядок create(), ничего не поменяется. У block1 вообще не работает обработчик после создания block2. Даже если перед созданием block2 сделать block1.create(). Оно будет работать только до тех пор, пока не будет создан block2. То есть проблема в том, что если элемент был создан внутри класса, и там же назначен обработчик события, то при создании ещё одной копии класса, у прошлого перестает назначаться и работать обработчик.. Я уже пытался внутри класса отдельно вывести назначение обработчика. Так же пытался другие типы (onmousedown и даже attachEvent). Ничего не помогает. Так же пытался вне класса назначить, но тут тоже интересная ситуация: Код: *Код класса, но без назначение обработчика при создании* var block1 = new Block(); block1.create(1); //Просто создаем блок 1. var block2 = new Block(); block2.create(2); //Просто создаем блок 2. console.log(block1.elem); // Выводит: <div id='1'></div> console.log(block2.elem); // Выводит: <div id='2'></div> console.log(document.getElementById(1)); // Выводит: <div id='1'></div> console.log(document.getElementById(2)); // Выводит: <div id='2'></div> // И так и так выводятся правильные элементы Продолжение кода: Вот как НЕ работает block1.elem.addEventListener("mousedown", function(){console.log("Pressed")},false); // Не работает. block2.elem.addEventListener("mousedown", function(){console.log("Pressed")},false); // Работает. Вот так Работает document.getElementById(1).addEventListener("mousedown", function(){console.log("Pressed")},false); // Работает. document.getElementById(2).addEventListener("mousedown", function(){console.log("Pressed")},false); // Работает. Непонятно мне, почему и block.elem и document.getElementById() выводят правильные значения, но при этом обработчик работает только на второй вариант. Кстати если внутри самого create() сделать не по this.elem, а так же по гетЭлемИд, то тоже не работает. В общем-то не понимаю тут немного логики и прошу помощи. Подозреваю, что это все именно из-за классов, но что именно, не знаю. Буду очень благодарен за помощь. |
Цитата:
|
рони,
Благодарю, теперь все работает. Хотя единственное не понятно, почему во втором случае не работало, когда я эвенты биндил отдельно по block.elem, но по GetElementById работало. |
Часовой пояс GMT +3, время: 11:35. |