JavaScript stopPropagation

Question

I'm just learning so probably the code is not the best. I tried several examples in other answers but I'm stuck here.

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

And I have this jQuery code:

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

All that is working but I'm trying to replace all my jQuery functions with pure Javascript so I tried this:

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

I tried adding the event listener into the Function invisibleDiv and I can see in DevTools the event is attached, but when clicking secondDiv still triggers the event in invisibleDiv.

I can make it work adding both divs into the html code with Display: none/block but since it works with jQuery when added dynamically I wanna know what I'm doing wrong.

Answer 1

Update:

Based on your comments above, it seems to me that you're looking for something like this:

  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/

It looks like you're not calling the function.

Functions in JavaScript are executed by using () brackets so your code becomes:

e.stopPropagation(); and secondDiv.stopPropagation();

The call to secondDiv.stopPropagation() is redundant since the element object doesn't have that function, and needs to be removed.