blog-slider__img容器内按钮OnClick事件失效问题求助

核心问题分析 #

按钮放置在.blog-slider__img容器内无法触发点击，大概率是层级遮挡或Swiper组件阻止了点击事件导致的，以下是针对性的解决步骤：

1. 修复层级遮挡问题 #

你的按钮使用了position: absolute，但父容器.blog-slider__img未设置position: relative，导致按钮定位基准错误；同时<img>元素会默认覆盖在按钮上方，让你实际点击不到按钮。

解决代码：

/* 给父容器添加相对定位，作为按钮的定位基准 */
.blog-slider__img {
  position: relative;
}

/* 给按钮设置更高层级，确保在图片上方，同时调整到可视位置 */
.blog-slider__img button {
  position: absolute;
  z-index: 10;
  top: 15px;
  left: 15px;
}

2. 解除Swiper的事件阻止 #

Swiper的滑动手势逻辑会默认拦截内部元素的点击事件，你可以通过两种方式解决：

• 直接给按钮添加pointer-events: auto，强制开启点击响应：

<button style="position: absolute; z-index:2随机; DivS''" onclick sight  

]

哦不对，重新写正确的HTML：

<button style="position: absolute; z-index:10; pointer-events: auto;" onclick="document.getElementById('player').play()">Play</button>

• 或者在Swiper初始化配置中关闭事件阻止：

const swiper = new Swiper('.blog-slider__wrp', {
  // 保留你的原有配置
  preventClicks: false, // 禁止Swiper阻止点击事件
  preventClicksPropagation: false // 禁止点击事件冒泡被拦截
});

3. 清理音频元素的冗余代码 #

你的音频元素添加了和外层slide重复的类blog-slider__item swiper-slide，可能导致样式冲突，建议简化：

<audio id="player" src="cazuar.mp3"></audio>

内容的提问来源于stack exchange，提问作者Vinícius Augusto