title: Stop event listener from listing to children elements in Vue
body: <p>I'm creating a modal in Vue, which I want to to be able to close whenever the user clicks outside of the inner modal container. The problem is when I add an event listener on click to the parent element all children elements also trigger that event listener when clicked.</p>
  
  <p>I created a simple demo below to demonstrate my problem. If the user clicks on the black portion of the parent element the modal should close but the containing white space of the child element shouldn't be able to trigger the close function.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: '#modal',
    data: {
      active: true,
    },
    methods: {
      closeModal() {
        this.active = false
      }
    }
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    justify-content: center;
    align-items: center;
    background-color: black;
  }
  
  .modal.active {
    display: flex;
   }
  
  .modal-content {
    width: 200px;
    height: 200px;
    padding: 1rem;
    background-color: white;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="modal" class="modal" :class="{active: active}" v-on:click="closeModal"&gt;
    &lt;div class="modal-content"&gt;This child element shouldn't be able to close the modal on click.&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>