Vue可点击行和href冲突答案

【问题标题】：Vue clickable row and href conflictVue可点击行和href冲突
【发布时间】：2021-07-21 12:00:52
【问题描述】：

对不起。一个颠倒的问题。我有这张桌子。这可以通过 iWasClicked 函数点击，但我也有最后一个带有可点击图像的 td (href)。我希望最后一个 td 只能通过图像（href）点击。现在，它触发了两者。 tr 中的 href 链接和 iWasClicked。

<tr
          class="bg-gray-100 text-dark text-center cursor-pointer hover:bg-gray-300"
          v-for="currentView in getOrganizationsDashboard().projects"
          :key="currentView.id"
          @click="iWasClicked(currentView.projectName)"
        >
          <td class="px-4 py-3 border-b-2 border-dark">
            <!-- {{ showProjectSuccessRunPercentage(currentView)}} -->
            <img
              class="w-10 inline-block align-middle"
              :src="showProjectSuccessRunPercentage(currentView)"
              alt="Organization Icon"
            />
          </td>
          <td class="px-4 py-3 border-b-2 border-dark">
            {{ currentView["projectName"] }}
          </td>
          <td class="px-4 py-3 border-b-2 border-dark">
            <a
              class=" "
              :href="
                'https://xxx.us/org/' + currentView['projectName']
              "
              target="_blank"
              ><img
                class="inline-block w-10"
                alt=""
                src="../assets/img/myLogo.svg"
            /></a>
          </td>
        </tr>

【问题讨论】：

标签： vue.js href tr

【解决方案1】：

您必须阻止点击事件冒泡并触发对tr 的点击，您可以这样做：

<a @click="$event.stopPropagation()"</a>

【讨论】：

也有效。不确定这和调用“@click.stop”有什么区别？两者似乎都对我有用。非常感谢，很抱歉回复晚了。

【解决方案2】：

<a
  class=" "
  :href="'https://xxx.us/org/' + currentView['projectName']"
  target="_blank"
  @click.stop
  >
    <img class="inline-block w-10"
         alt=""
         src="../assets/img/myLogo.svg"/>
</a>

【讨论】：

顺便说一句，Woodrow 兄弟和我的区别在于我使用的是 vue 事件修饰符，当他使用 vanilla javascript 时，它更简单易读。两种方法都不会出错

【解决方案3】：

最好使用为@click 提供的Vue 事件修饰符，即.stop。就像Brother Woodrow 的回答一样，这也将停止点击事件的传播。

<tr @click.stop="iWasClicked(currentView.projectName)">

【讨论】：

抱歉回复晚了。是的，谢谢，但要稍作修改。我应该把它放在我想在点击时停止的 td 中，而不是整个 tr 中。再次感谢！