Как быть с событиями onclick и вложенными элементами?

Question

[swcalc]

Такая ситуация

<div onclick="func_a();">
    <div onclick="func_b();"></div>
</div>

При клике на func_b, сработает func_a, как поступить, чтобы все было "как надо"?
Только вынести дочерние элементы из родительского или есть варианты по проще?

Answer 1

[Eugene Mosyukov]

<div onclick="func_a()">
    <div onclick="func_b(event)"></div>
</div>
<script type="text/javascript">
    function func_a() {
        alert('a');
    }
    function func_b(e) {
        e.stopPropagation();
        e.cancelBubble = true; // для IE
        alert('b');
    }
</script>

Читать подробнее:
— https://developer.mozilla.org/en-US/docs/Web/API/E...
— https://msdn.microsoft.com/en-us/library/ms533545(...

Answer 2

[_ _]

Почитайте про "всплытие" событий и как его предотвратить программно.

Comments

[Евгений Петров]

Распространение события можно предотвратить не только в фазе всплытия, но и в фазе захвата.

Answer 3

[Евгений Петров]

Есть вариант прочесть про события, про его фазы, про метод события stopPropagation(), а также перестать использовать атрибуты событий там, где это не нужно.

Comments

[swcalc]

Ситуация обстоит так, что можно повесить обработчик на вложенный элемент, но для восприятия удобнее было бы на весь блок, так же есть 2 вложенные кнопки, без которых не обойтись.

[Евгений Петров]

swcalc: Не понял, как это связано с атрибутами событий.

[swcalc]

Евгений Петров: чтобы не ломать голову с listner'ами, использую их...