如何点击上层图标而不触发下层图片的点击事件？

我在一张图片上方叠加了一个图标，代码如下：

<font-awesome-icon class="icons bookmark" icon="fa-solid fa-bookmark"></font-awesome-icon>
<img :src="images[0]" @click.native="visit(l._id)" />

但在移动设备上点击图标时，总是会触发下层图片的点击事件。有没有办法阻止这种情况发生？

我的CSS类样式：

<style scoped>
img {
    border-radius: 25px;
    margin: 8px;
    width: calc(100% - 50%);
}

.icons.bookmark {
    font-size: 1.5em;
    z-index: 100;
    position: absolute;
    top: 20px;
    left: 1em;
}

.icons.bookmark:hover {
    color: green;
}
</style>

图标在图片上的效果：

核心是阻止点击事件从图标冒泡到下层图片，以下是两种可靠的解决方法：

方法1：给图标添加点击事件并阻止冒泡 #

直接在<font-awesome-icon>上绑定点击事件，调用stopPropagation()阻止事件向上传递：

<font-awesome-icon 
  class="icons bookmark" 
  icon="fa-solid fa-bookmark"
  @click="$event.stopPropagation()"
></font-awesome-icon>
<img :src="images[0]" @click.native="visit(l._id)" />

如果图标本身需要执行点击逻辑，把阻止冒泡写在对应的方法里即可：

<font-awesome-icon 
  class="icons bookmark" 
  icon="fa-solid fa-bookmark"
  @click="handleBookmarkClick"
></font-awesome-icon>

methods: {
  handleBookmarkClick(event) {
    event.stopPropagation(); // 阻止事件冒泡到图片
    // 此处添加图标点击的业务逻辑
  }
}

方法2：结合CSS确保图标可捕获点击（辅助优化） #

移动端偶尔会出现触摸事件穿透的情况，可以给图标添加pointer-events: auto确保它能优先接收点击事件，配合方法1使用效果更稳定：

.icons.bookmark {
    font-size: 1.5em;
    z-index: 100;
    position: absolute;
    top: 20px;
    left: 1em;
    pointer-events: auto; /* 确保图标优先响应点击 */
}

注：优先使用方法1，这是从事件机制根源解决冒泡问题的方案，兼容性和可靠性最好。

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