Может немного некорректно тему назвал, но все же..
Давайте для начала приведу код..
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, а так же по гетЭлемИд, то тоже не работает.
В общем-то не понимаю тут немного логики и прошу помощи. Подозреваю, что это все именно из-за классов, но что именно, не знаю.
Буду очень благодарен за помощь.