Javascript 可点击图像上的可点击按钮

我想有一张卡，上面有可点击的主图像内容和可点击的按钮。看到图片了吗

该图像有一个onclick动作，第二个按钮。但我无法从按钮启动操作，它总是执行与图像单击相关联的操作

我的代码是：

<v-card flat class="rounded-0">
    <v-img style="z-index: 0" :src="product.images" 
        v-on:click="action1">
        <v-card-title class="align-end fill-height" primary-title>

            <v-btn class="blue" style="z-index: 9999" v-on:click="action2">clickable</v-btn>
           </v-card-title>

          </v-img>                       
 </v-card>

可点击

---

在上面的代码中，有两个事件，一个是父事件，另一个是子事件

单击父函数后，只调用父函数。若你们点击子函数，它会先触发子函数，然后触发父函数

要在单击子触发器时停止父触发器，请使用“停止”修改器

下面的代码将按预期工作

<v-card flat class="rounded-0">
    <v-img style="z-index: 0" :src="product.images" v-on:click="action1">
        <v-card-title class="align-end fill-height" primary-title>
            <v-btn class="blue" style="z-index: 9999" v-on:click.stop="action2">clickable</v-btn>
        </v-card-title>
    </v-img>                       
</v-card>

可点击

为防止冒泡，您需要在单击事件中添加一个名为

self

的修改器：

v-on:click.self="action1"
v-on:click.self.stop="action2"

---

您的语法似乎不正确：

Simon，您实际指的是哪一部分？我试图清理它，但仍然看不到代码中的错误在哪里。

v-on=“on”

和

v-on:click=“…

在回答中，代码已被更正