在vue中 我现在有两个图片 第一个图片是底子,另外一张图片在第一张图片右上角 两个图片都有对应的点击事件 我想要实现点击右上角的图片 不出发第一张图片的点击事件
可以在右上角的图片上添加一个 @click
事件,并且使用 event.stopPropagation()
方法来阻止事件冒泡,这样就不会触发底图的点击事件了。
<template> <div> <img src="base-image.jpg" @click="handleBaseImageClick"> <img src="top-right-image.jpg" @click.stop="handleTopRightImageClick"> </div> </template> <script> export default { methods: { handleBaseImageClick() { console.log('Base image clicked'); }, handleTopRightImageClick(event) { console.log('Top right image clicked'); event.stopPropagation(); } } } </script>