Javascript stopPropagation

Question

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

Function invisibleDiv(){ 
    var invDiv = document.createElement('div'); 
    var secondDiv = document.createElement('div'); 
    secondDiv.setAttribute('class', 'secondDiv'); 
    document.body.appendChild(invDiv); 
    invDiv.appendChild(secondDiv); 
}; 

И у меня есть этот JQuery код:

$(document).on("click", ".secondDiv", function (e){ 
    e.stopPropagation(); 
}); 

Все, что работает, но я пытаюсь заменить все свои функции JQuery с чистым JavaScript, поэтому я попытался это:

document.addEventListener("DOMContentLoaded", function(event) { 
    var secondDiv = document.querySelector('.secondDiv'). 
    div.addEventListener('click', function(e) { 
    e.stopPropagation; // Not working 
    secondDiv.stopPropagation; // Not working 
    } 
}); 

Я попытался добавить прослушиватель событий в функцию invisibleDiv, и я вижу, что в DevTools событие подключено, но при нажатии secondDiv все еще запускает событие в invisibleDiv.

Я могу заставить его работать, добавляя оба divs в html-код с Display: none/block, но поскольку он работает с jQuery при динамическом добавлении, я хочу знать, что я делаю неправильно.

Answer 1

Update:

на основе ваших комментариев выше, мне кажется, что вы ищете что-то вроде этого:

var outer = document.querySelector('.outer'); 
    var inner = document.querySelector('.inner'); 

    outer.addEventListener('click', function(e) { 
     console.log("Outer clicked"); 
    }); 

inner.addEventListener('click', function(e) { 
    e.stopPropagation(); 
}); 

http://jsfiddle.net/j9a0nsto/

Похоже, вы не вызывая функцию.

Функции в JavaScript выполняются с помощью () скобки, чтобы ваш код становится:

e.stopPropagation(); и secondDiv.stopPropagation();

Вызов secondDiv.stopPropagation() является излишним, так как element объект не имеет такой функции, и должна быть удален.