如何在 vuejs 中防止/停止点击传播

Posted 2023-03-16

【中文标题】如何在 vuejs 中防止/停止点击传播

【英文标题】：How to prevent/stop click propagation in vuejs

【发布时间】：2018-05-10 19:39:52

【问题描述】：

我有一个递归列表（树），每个元素都有一个@click="sayHello(el.id)"。现在的问题是，因为它是一个嵌套列表，例如：

list-element-0-01
├──list-el-1-01
│   └──list-el-2-01
└──list-el-1-02
    └──list-el-2-02

如果我点击元素：list-el-2-01 然后我得到输出

 > "list-el-2-01"
 > "list-el-1-01"
 > "list-el-0-01"

完全按照这个顺序。我的意思是我明白了，看看 html：

<ul>
  <li @click="sayHello('list-el-0-01')"> one-one

    <ul>
      <li @click="sayHello('list-el-1-01')"> two-one
        <ul>
          <li @click="sayHello('list-el-2-01')"> three-one </li> // I click this
        </ul>
      </li>

      <li @click="sayHello('list-el-1-02')"> two-two
        <ul>
          <li @click="sayHello('list-el-2-02')"> three-two </li>
        </ul>
      </li>
    </ul>

  </li>
</ul>

不知何故，我还单击了所有包装元素，这是有道理的。我的问题 - 有没有办法只让 exact 元素触发它的点击事件？

【参考方案1】：

您可以使用.stop 事件修饰符来停止传播：

@click.stop="sayHello"

现在事件不会传播到父节点

有关事件修饰符列表的更多信息：https://vuejs.org/v2/guide/events.html#Event-Modifiers

【讨论】：

适用于 vue js 2.96