vue的阻止事件冒泡click.stop和click.preve

click.stop和click.prevent都是阻止事件冒泡，具体区别：

click.stop阻止事件冒泡
click.prevent 阻止事件的默认行为，比如a标签的默认跳转

页面：

image.png 点击删除图标prevent.png 点击编辑图标stop.png

页面效果说明：

1，最外层整体div一个click事件choose
2，编辑图标 使用click.stop ---点击只执行 edit
3，删除图标 使用click.prevent --点击先执行delete，然后在执行最外层的choose
4，a标签 自带href 同时 使用click.prevent--点击先执行testAclick，然后在执行最外层的choose
5，a标签自带href 同时 使用click.stop --点击先执行testAclick，然后跳转页面

页面源码：

<div @click="choose">
      <div class="flex">
              <p class="flex-item ">xxx名称</p>
              <span class="identify-icon iconfont icon-bianji" @click.stop="edit"></span>
              <span class="identify-icon iconfont icon-shanchu" @click.prevent="delete"></span>
              <a class="identify-icon" href="http://www.baidu.com" @click.prevent="testAclick">a标签</a>
       </div>
  </div>

//事件
     choose(){
        console.log('最外层的div的click');
      },

      edit(){
        console.log('edit--')
      },

      delete(){
        console.log('delete-- prevent') //如果用prevent仍然能执行外层div的事件
      },

      testAclick(){
        console.log('a -- prevent')
      },