Обработчик событий OnClick (JS)

[SoftKoc]

Здравствуйте

Такая вот проблема:
Есть div у него есть чилды тоже div-ы, делаю этому div-у обработчик "onclick" - но он почему-то отрабатывает и на чилдах.

Подскажите как это исправить, и почему это происходит???

Пример:

  var bloc = document.createElement('div');
  bloc.id = 'overlay';
  bloc.className = 'overlay';
  bloc.onclick = function close() {document.body.removeChild(bloc);};
  bloc.innerHTML = '';
  document.body.appendChild(bloc);
  
  var m_window = document.createElement('div');
  m_window.id = 'm_window';
  m_window.className = 'window';
  m_window.innerHTML = 'Я модальное окно!';
  bloc.appendChild(m_window);

[MyLastHit]

http://javascript.ru/tutorial/events...rigger:-target

[SoftKoc]

Сообщение от MyLastHit

http://javascript.ru/tutorial/events...rigger:-target

А еще варианты есть? Например по ID - div-а.

[MyLastHit]

Не знаю, не встречал. Кинул этот вариант, он все-таки предпочтительнее, на нем базируется делегирование событий.

[Naive]

Подскажите как это исправить, и почему это происходит???

1. На каждый дочерний элемент навесить свой обработчик события клик с прекращением иерархии вызова (return false).
2. Это не ошибка. Любое событие выполняется для объекта и для каждого родительского элемента вплоть до document.

[SoftKoc]

А вот еще проблем
Столкнулся в FireFox с srcElement.

Пробовал таким методом исправить все:

var target = elems && elems.target || event.srcElement;

Ничего не получилось.

Подскажите пожалуйста как получать srcElement или точнее event в FireFox а еще луче кросс браузерно

[Naive]

Сложно...
К сожалению, максимум что могу порекомендовать, это jQuery, он кросс-браузерно передает всю инфу о событии.

[MyLastHit]

Вот мне кажется ИМХО лучше подписываться на события атрибутами, а в JS только контроллеры. AngularJS пошел по этому пути и я им доволен. Нет этих тон ненужного кода.

[SoftKoc]

Вроде как нашел способ обойти это дело

Код функции:

function test(event) {
  var event = event || window.event;
  
  window.alert(event.target.className);
}

И вызов ее:

onclick="test(event);"

Работает в Mozilla Firefox, Opera, Google Chrome. В IE не тестил. (Если кто вдруг будет тестить в IE сообщите результат).
В дебаге нашел общую черту этих браузеров "target.className".