title: Vue clickable row and href conflict
body: <p>Sorry. An upside-down question. I have this table. That is clickable through iWasClicked function, but I also have the last td with clickable images (href). I want the last td to be only clickable through the images(href). Now, it triggers both. The href link and the iWasClicked from the tr.</p>
  <pre><code>&lt;tr
            class=&quot;bg-gray-100 text-dark text-center cursor-pointer hover:bg-gray-300&quot;
            v-for=&quot;currentView in getOrganizationsDashboard().projects&quot;
            :key=&quot;currentView.id&quot;
            @click=&quot;iWasClicked(currentView.projectName)&quot;
          &gt;
            &lt;td class=&quot;px-4 py-3 border-b-2 border-dark&quot;&gt;
              &lt;!-- {{ showProjectSuccessRunPercentage(currentView)}} --&gt;
              &lt;img
                class=&quot;w-10 inline-block align-middle&quot;
                :src=&quot;showProjectSuccessRunPercentage(currentView)&quot;
                alt=&quot;Organization Icon&quot;
              /&gt;
            &lt;/td&gt;
            &lt;td class=&quot;px-4 py-3 border-b-2 border-dark&quot;&gt;
              {{ currentView[&quot;projectName&quot;] }}
            &lt;/td&gt;
            &lt;td class=&quot;px-4 py-3 border-b-2 border-dark&quot;&gt;
              &lt;a
                class=&quot; &quot;
                :href=&quot;
                  'https://xxx.us/org/' + currentView['projectName']
                &quot;
                target=&quot;_blank&quot;
                &gt;&lt;img
                  class=&quot;inline-block w-10&quot;
                  alt=&quot;&quot;
                  src=&quot;../assets/img/myLogo.svg&quot;
              /&gt;&lt;/a&gt;
            &lt;/td&gt;
          &lt;/tr&gt;
  </code></pre>