title: How to prevent DOM children from inherit addEventListener?
body: <p>I need a custom context menu, so I use <code>addEventListener</code> for it, but I wish to have it on the div1, but not on div2, how I can do it <strong>without</strong> to add the same listener with <code>stopPropagation()</code></p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id="div1" style="background-color:green;border:3px solid black;width:300px;height:300px;margin:auto;"&gt;
  &lt;div id="div2" style="background-color:yellow;border:3px solid black;width:100px;height:100px;margin:auto;margin-top:-50px;"&gt;
  some text
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;script&gt;
  document.getElementById('div1').addEventListener('contextmenu', function(e)
      {
      console.log('contextmenu');
      });
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>