title: Checking Clicked Element in Bubbling
body: <p>I was tinkering with event bubbling and I created the typical 3 divs each other exercise for myself and I was able to get the code working and event to stop "bubbling" where I wanted.  </p>
  
  <p>My code was clunky so I tried to make it a little more simplified. By having all my <code>&lt;divs&gt;</code> point to a single function, that had a statement that said if <strong>this</strong> <code>&lt;div&gt;</code> was clicked, run the function and then stop propagation, but I believe the way I am "checking" the click is wrong.</p>
  
  <p>Link: <a href="https://jsfiddle.net/theodore_steiner/t5r5kov0/3/" rel="nofollow">https://jsfiddle.net/theodore_steiner/t5r5kov0/3/</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var d1 = document.getElementById("d1");
  var d2 = document.getElementById("d2");
  var d3 = document.getElementById("d3");
  
  function showme(event) {
    if (d3.onclick == true) {
      alert("hello")
      event.stopPropagation();
    } else {
      alert("hello");
    }
  };
  
  d1.addEventListener("click", showme);
  d2.addEventListener("click", showme);
  d3.addEventListener("click", showme);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code> #d1 {
     height: 300px;
     width: 300px;
     border: 1px solid black;
   }
   #d2 {
     height: 200px;
     width: 200px;
     border: 1px solid black;
   }
   #d3 {
     height: 100px;
     width: 100px;
     border: 1px solid black;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="d1"&gt;
    &lt;div id="d2"&gt;
      &lt;div id="d3"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>