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