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

debugcn 发表于 Dev

托马斯·巴特拉（Tomas Batrla）

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

。

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

有什么我想念的吗？

机会

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

一旦单击父级，则仅调用父级功能。如果单击子级，它将首先触发子级，然后触发父级功能

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

下面的代码将按预期工作

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。