Vue 阻止点击事件向父级传递

实际案例

• 点击图片中间的删除按钮，则触发删除逻辑
  
• 点击图片其他区域，触发图片放大预览逻辑
  

正确的实现如下

<li v-for="(element, index) in images"
    @click="preview(index)"
    >
    ...
    <span>
        <i @click.stop="remove(index)"></i>
    </span>
    ...
</li>

如果不加 stop 的话，在点击删除按钮后，预览逻辑也会被触发。

stop 的说明：https://vuejs.org/v2/guide/events.html#Event-Modifiers

the click event’s propagation will be stopped

参考

https://stackoverflow.com/questions/45700632/prevent-on-click-on-parent-when-clicking-button-inside-div

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式