Vue.js - 点击 span 也会点击输入。如何防止？答案

【问题标题】：Vue.js - clicking on span also clicks on input. how to prevent that?Vue.js - 点击 span 也会点击输入。如何防止？
【发布时间】：2020-01-20 20:37:03
【问题描述】：

我有这样的代码。

<label class="pr-container">
    Please confirm you have read and understood out 
   <span @click="openConditionsModal($event, 'terms')" class="pr-default-link">Terms & Conditions</span> and
   <span @click="openConditionsModal($event, 'policy')" class="pr-default-link">Privacy Policy</span>. 
     bla blabladasd

   <input v-model="agreed" type="checkbox" checked="checked">
   <span class="checkmark"></span>
</label>

当我点击条款和条件或隐私政策范围时，还会发生<input v-model="agreed"> 也会被标记。如果再次单击，它将被取消标记。我想要的是单击跨度时，复选框及其值根本不应该改变。

任何想法为什么会发生以及如何避免这种情况？

【问题讨论】：

你在那个处理程序中有“防止默认”选项吗？

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

尝试.stop 或.self 修饰符来停止事件传播，如下所示：

 <span @click.stop="openConditionsModal($event, 'terms')" ...

或

  <span @click.self="openConditionsModal($event, 'terms')" ...

了解更多关于event modifiers

【讨论】：

它不起作用，因为事件传播是子父连接。 span 和我的示例中的那个复选框都是邻居。 :D
所以试试.self修饰符
还是不行。我不知道为什么。可能是因为一些 css 的东西吗？
给我一些时间在 codepen 中重现问题
@HDallakyan 回答正确，请查看demo

【解决方案2】：

尝试像这样重构你的 HTML

 <div class="pr-container">
            Please confirm you have read and understood out 
                   <span @click="openConditionsModal($event, 'terms')" class="pr-default-link">Terms & Conditions</span> and
                   <span @click="openConditionsModal($event, 'policy')" class="pr-default-link">Privacy Policy</span>. 
                     bla blabladasd

                <label>
                   <input v-model="agreed" type="checkbox" checked="checked">
                   <span class="checkmark"></span>
                </label>
        </div>

【讨论】：

【解决方案3】：

发生这种情况是因为您的跨度是与输入关联的标签的一部分（您将输入放置在标签内）。单击与输入关联的标签将聚焦或触发输入。

我建议重组您的 html 并使用 css 来解决此问题。通常，这种方法比应用 stop 和 prevent 等事件修饰符更健壮且易于访问。

您的结构可能如下所示：

<label for="agreed">Check here to indicate that you understand:</label>
<span>Terms & Conditions</span>
<span>Privacy Policy</span>
<input v-model="agreed" type="checkbox" id="agreed">

您可以使用 CSS 和一些重组来使跨度和标签都显示为一个单元。请注意，屏幕阅读器会将标签与输入相关联，因此单独使用它是一个好主意。

【讨论】：