Как предотвратить запуск обработчика кликов при нажатии на дочерний элемент?

Question

У меня есть два тега div, первый div - это отец, а второй div - сын. Внутри отца вот так

<div id="father"> 
<div id="son"> </div>
</div>

И я добавил событие (onclick) в div отца, как это

<div id="father" onclick="closeFather()"> 
<div id="son"> </div>
</div>

Мой вопрос , почему сын наследует отца в этом случае.

Я хочу, чтобы, когда я нажимаю на отца, div реализовывал событие, но когда я нажимал на сына, он ничего не реализовывал, потому что у него не было события.

Answer 1

Это вызвано особенностью JavaScript, называемой Событие, всплывающее .По умолчанию ваши события будут «пузыриться» в DOM.

При нажатии на дочерний узел вы автоматически инициируете событие щелчка для его родительских узлов.

По умолчанию при щелчке по элементу происходит пузырение изнутри : это означает, что сначала будет инициировано событие click() дочернего элемента, затем его родитель и т. Д.

Вы можете решить проблему , добавив дополнительный обработчик кликов к вашему дочернему элементу и указав браузеру прекратить пузыриться в кросс-браузерно-совместимом способе, например ( см. Пример в реальном времени)):

<script language="javascript">
    function parentHandler(e) {
        alert('parent clicked');
    };

    function childHandler(e) {
        if (!e) var e = window.event;
        e.cancelBubble = true;
        if (e.stopPropagation) e.stopPropagation();    

        alert('child clicked');

    };    
</script>

<div id="parent" onclick="parentHandler(event);">
    Foo
    <div id="child" onclick="childHandler(event)">
        Bar
    </div>
</div>

Answer 2

Вы можете передать событие в качестве одного из аргументов функции closeFather, а затем проверить, является ли цель события родительским элементом. См. этот пример

function closeFather(e) {
    if(e.target == document.getElementById('father')) {
        //do stuff
    }
};

Затем в HTML вам просто нужно добавить аргумент события в функцию javascript.

<div id="father" onclick="closeFather(event)">
<div id="son"></div>
</div>

Answer 3

Это событие пузырится. Основная часть DOM Events. Вы можете return false и предотвратить пузыри в вашем обработчике (closeFather, но вы должны передать ему событие), если событие вызвано son.