可点击图像上的可点击按钮答案

【问题标题】：clickable button over clickable image可点击图像上的可点击按钮
【发布时间】：2019-10-16 20:14:06
【问题描述】：

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

。

图像有一个 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-img style="z-index: 0" :src="product.images" v-on="on" v-on:click="logclick(product, 'product_exit'); track_result_click()">
Simon，你到底指的是哪一部分？我试图清理它，但仍然没有看到代码中的错误。
v-on="on" 和 v-on:click="... 一起
在答案中代码已被更正

标签： javascript vue.js vuetify.js

【解决方案1】：

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

单击父级后，仅调用父级函数。如果你点击子，它会先触发子函数，然后是父函数

要在单击子项时停止父触发器，请使用停止修饰符

以下代码将按预期工作

<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>

【讨论】：

【解决方案2】：

为防止冒泡，您需要在单击事件上添加一个名为 self 的修饰符：

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

【讨论】：