title: Vue.js - clicking on span also clicks on input. how to prevent that?
body: <p>I have a code like this.</p>
  
  <pre><code>&lt;label class="pr-container"&gt;
      Please confirm you have read and understood out 
     &lt;span @click="openConditionsModal($event, 'terms')" class="pr-default-link"&gt;Terms &amp; Conditions&lt;/span&gt; and
     &lt;span @click="openConditionsModal($event, 'policy')" class="pr-default-link"&gt;Privacy Policy&lt;/span&gt;. 
       bla blabladasd
  
     &lt;input v-model="agreed" type="checkbox" checked="checked"&gt;
     &lt;span class="checkmark"&gt;&lt;/span&gt;
  &lt;/label&gt;
  </code></pre>
  
  <p>When I click Terms and Condition or Privacy policy spans, what also happens is <code>&lt;input v-model="agreed"&gt;</code> also gets marked. If clicking again, it gets unmarked. What I want is when clicking on span, checkbox and its value shouldn't change at all.</p>
  
  <p>Any ideas why it happens and how to avoid that?</p>