title: How to prevent event bubbling in javascript
body: <p>thanks for reading... I'll get right into the issue.</p>
  
  <p>I have an <em>onclick</em> function attached to an image.</p>
  
  <pre><code>&lt;div id="mercury" onclick="displayCreations()"&gt;
  </code></pre>
  
  <p>Javascript function:</p>
  
  <pre><code>function displayCreations(){
     document.getElementById("projects").style.display = "block";
  }
  </code></pre>
  
  <p>The div I'm displaying as a block is set to <em>none</em> once you arrive at the page. This function sets the display to block, which <strong>works</strong>. </p>
  
  <p>I'm having trouble with making an <em>onclick</em> function for an image inside the <em>div</em> that sets the <em>display</em> value back to <em>none</em>. This doesn't seem to work with my current code...</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="mercury" onclick="displayCreations()"&gt;
          &lt;img id="exit" onclick="hideCreations()" src="./assets/images/exit.png" alt="exit button" title="Leave Planet: Mercury" /&gt;
          &lt;div id="projects"&gt;
              &lt;h3&gt;No creator here, but it looks like you've found some his wonderous creations...&lt;/h3&gt;
              &lt;ol&gt;
                  &lt;li&gt;Project 1&lt;/li&gt;
                  &lt;li&gt;Project 2&lt;/li&gt;
                  &lt;li&gt;Project 3&lt;/li&gt;
              &lt;/ol&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>Javascript: </p>
  
  <pre><code>function displayCreations(){
     document.getElementById("projects").style.display = "block";
  }
  
  function hideCreations(){
     document.getElementById("projects").style.display = "none";
  }
  </code></pre>
  
  <p>When I run this site on <em>google chrome</em> and click the 'exit' button, nothing happens and nothing is displayed in the error messages. </p>
  
  <p>This link leads you to a well-known site, Gyazo, where you can find a gif of what I see on my end.</p>
  
  <p>Link: <a href="https://gyazo.com/e5000929c3d52602815253b84918e677" rel="noreferrer">Link</a></p>
  
  <p>I'd prefer a javascript solution for my current code, and perhaps you can explain to me why this is happening so I don't get into the same situation again. </p>