Как остановить распространение в Javascript

Question

Я просмотрел все и не могу полностью понять, что я делаю неправильно.

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

Простые ответы приветствуются!

Спасибо

HTML
<div id="not-clicker">
    <div id="clicker" onClick="clickBox();">
    </div>
</div>

JAVASCRIPT
function clickBox(event) {
    document.getElementById('clicker').style.backgroundColor = 'green';
    event.stopPropagation();
};

JSfiddle (не работает должным образом)

Answer 1

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

изменение HTML

<div id="clicker"></div>

JS изменить

document.getElementById('clicker').onclick = function(event){
 document.getElementById('clicker').style.backgroundColor = 'green';
 //this.style.backgroundColor = 'green';note you can also use this to reference the element now
 event.stopPropagation();
};

редактировать

Дальнейшая информация

Обратите внимание, что, поскольку это больше не является встроенным, скрипт должен запускаться после того, как элемент находится в DOM. Для этого вам нужно будет поместить скрипт ниже на странице или дождаться события загрузки окна. Вот пример этого

window.onload = function(){//this callback executes when the window is fully loaded
 //now we can guarantee all DOM elements are present
 document.getElementById('clicker').onclick = function(event){
  this.style.backgroundColor = 'green';
  event.stopPropagation();
 };
};

Answer 2

На твоей судьбе clickBox находится в onLoad.. используйте "Нет Wrap в голове" на левой стороне

А у вас там getElementByTag! использование getElementById,