最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to preventstop click propagation in vuejs - Stack Overflow

programmeradmin0浏览0评论

I have a recursive list (tree) and each element has a @click="sayHello(el.id)". Now the problem is, since it is a nested list like:

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

If I click the element: list-el-2-01 then I get the output of

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

In exact that order. I mean I get it, looking at the 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>

It makes sense that I am also clicking all the wrapping elements, somehow. My question - is there a way to only have the exact element fire it's click event?

I have a recursive list (tree) and each element has a @click="sayHello(el.id)". Now the problem is, since it is a nested list like:

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

If I click the element: list-el-2-01 then I get the output of

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

In exact that order. I mean I get it, looking at the 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>

It makes sense that I am also clicking all the wrapping elements, somehow. My question - is there a way to only have the exact element fire it's click event?

Share Improve this question edited Feb 27, 2018 at 13:27 samayo 16.5k13 gold badges93 silver badges113 bronze badges asked Nov 27, 2017 at 14:18 martinlasekmartinlasek 8921 gold badge8 silver badges9 bronze badges
Add a comment  | 

1 Answer 1

Reset to default 23

You can stop propogation using the .stop event modifier as:

@click.stop="sayHello"

Now the event won't be propagated to the parent

More on the list of event modifiers: https://v2.vuejs.org/v2/guide/events.html#Event-Modifiers

发布评论

评论列表(0)

  1. 暂无评论