可点击图片上的可点击按钮

Question

我想要一张带有可点击主图像内容和可点击按钮的卡片。看到图片

。

图像有一个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>

有什么我想念的吗？

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

Answer 2

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

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