小编mar*_*sek的帖子

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

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

list-element-0-01
???list-el-1-01
?   ???list-el-2-01
???list-el-1-02
    ???list-el-2-02
Run Code Online (Sandbox Code Playgroud)

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

 > "list-el-2-01"
 > "list-el-1-01"
 > "list-el-0-01"
Run Code Online (Sandbox Code Playgroud)

完全按照这个顺序。我的意思是我明白了,看着 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>
Run Code Online (Sandbox Code Playgroud)

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

html javascript vue.js vuejs2

4
推荐指数
1
解决办法
5232
查看次数

标签 统计

html ×1

javascript ×1

vue.js ×1

vuejs2 ×1