vue点击事件阻止冒泡的做法

问题描述

如下案例，点击列表中的删除按钮,子标签和父标签都会响应，log中依次打印删除点击、详情点击。

image.png

问题代码如下：

<template>
    <div class='btn_box' @click="goDetail">
        <div class='btn_ope'  v-show="status==1" @click.stop="goPayFunc">立即支付</div>
        <div class='btn_ope' v-show="status==5" @click="deleteOrder">删除</div>
    </div>
</template>

<script>
  export default {
      props: {
        status: {
            type: Number,
            default: 5,
        },
      },
      methods: {
        goDetail(){
            console.log('详情点击');
        },
       deleteOrder() {
            console.log('删除点击');
        },
      },
  }
</script>

原因及解决办法:

结合如何代码可知，点击事件由deleteOrder传递到了goDetail，实际上发生了冒泡问题，为了阻止事件传递到goDetail，需要将@click.stop="deleteOrder"改为@click.stop="deleteOrder"

正确代码如下

<template>
    <div class='btn_box' @click="goDetail">
        <div class='btn_ope'  v-show="status==1" @click.stop="goPayFunc">立即支付</div>
        <div class='btn_ope' v-show="status==5" @click.stop="deleteOrder">删除</div>
    </div>
</template>

<script>
  export default {
      props: {
        status: {
            type: Number,
            default: 5,
        },
      },
      methods: {
        goDetail(){
            console.log('详情点击');
        },
       deleteOrder() {
            console.log('删除点击');
        },
      },
  }
</script>