javascript - 可点击图像上的可点击按钮

Question

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

.

图像有一个 onclick Action ，按钮有第二个。但我无法从按钮触发操作，它总是执行与图像点击相关的操作。

我的代码是:

<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

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

一旦父对象被点击，只有父函数被调用。如果你点击 child ，它会先触发 child ，然后是父函数

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

下面的代码将按预期工作

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