Доброго времени суток!
Столкнулся с такой ситуацией:
Скрипт динамически создает несколько таблиц. На каждую таблицу вешается обработчик onclick, вида:
var applyElement = document.querySelector('#test');
var someElement = document.createElement('div');
applyElement.append(someElement);
table.addEventListener('click'. function(target){
//Если event.target == <a> ченить делаем
//в общем то вся обработка это манипуляции стилями
//здесь пытаюсь добавить еще один обработчик на внешний элемент
someElement.addEventListener('click', function(){alert('Hello')});
})
Так вот: table вложена в someElement (если это имеет значение). Теперь при щелчке на элемент <a> внтри table срабатывает не только функция навешенная на него, но и второй обработчик, который весит на someElement! Т.е. увидим alert()
Другими словами ситуация такая: есть
<div id='one'>
<div id='two'>
<div id='three'>
</div>
</div>
</div>
если добавить обработчик события на id='three', который при наступлении события должен повесить обработчик на id='two', это обработчик сразу же и срабатывает.
Почему так происходит?
Сейчас обошел это так.
function test(){
realFunction();
}
table.addEventListener('click' function(){
someElement.addEventListener('clilck', test); //теперь все нормально
});
Правда вот контекст потеряла realFunction, но сейчас что-нибудь придумаю, недеюсь.
