Vuetify中点击v-img内部按钮不触发图片点击事件的问题问询

这问题我之前开发Vuetify项目时也碰到过！因为Vuetify的v-img是封装后的组件，原生的@click.self修饰符没办法直接生效，不过有两个简单的方案可以解决你的需求：

方案一：使用事件修饰符.stop阻止冒泡 #

这是最直接的办法，给内部按钮的点击事件加上.stop修饰符，就能阻止事件向上冒泡到v-img组件，这样点击按钮时只会触发按钮自己的事件处理函数。

修改后的代码如下：

<div id="app">
  <v-container class="modal-container">
    <v-img lazy-src="https://picsum.photos/id/11/10/6" max-height="150" max-width="250" src="https://picsum.photos/id/11/500/300" @click="onClickImage" >
      <!-- 给按钮的click事件添加.stop修饰符 -->
      <v-btn primary @click.stop="onClickButton">open</v-btn>
    </v-img>
  </v-container>
</div>

new Vue({
  el: '#app',
  data() {
    return {
    }
  },
  methods: {
    onClickImage() {
      alert('Clicked image')
    },
    onClickButton() {
      alert('Clicked button')
    },
  }
})

.stop修饰符的作用就是终止事件的冒泡传播，让事件停在当前按钮组件层面，不会被父级的v-img捕获到。

方案二：在父组件事件中判断点击目标 #

如果你不想用事件修饰符，也可以在v-img的点击事件处理函数里，通过事件对象判断点击的目标是不是按钮（或者按钮的子元素），只有当点击的是图片本身时才执行逻辑。

修改onClickImage方法即可：

onClickImage(e) {
  // 用closest方法检查点击目标是否属于v-btn组件
  if (!e.target.closest('.v-btn')) {
    alert('Clicked image')
  }
}

这种方式更灵活，适合需要对点击目标做更多判断的场景。

内容的提问来源于stack exchange，提问作者Bruno Francisco