最稳妥是绑定在轮播容器上并用event.target.closest('.carousel-item.active')查找目标元素，避免误触和重复绑定，同时确保active类在transitionend后更新。
轮播图点击事件绑定在哪个元素上最稳妥
直接给轮播容器（比如 更可靠的做法：监听轮播容器的 多数自写轮播图会在每张幻灯片里放一个 在 Vue 的 立即学习“前端免费学习笔记（深入）”； 移动端轮播常同时监听 click 事件容易误触，尤其内部有按钮、指示器、图片懒加载占位符时。真正需要响应用户意图的，是「当前可见的轮播项」——也就是正在展示的 click，再用 event.target 向上查找最近的 .carousel-item.active，确认点击是否落在有效内容区。
.carousel-item 单独绑定事件（DOM 多、内存开销大）slide.bs.carousel 是切换前触发，不适用于「点击跳转」类交互原生 HTML 轮播图如何监听“点击后跳转到对应链接”
或带 data-href 的容器。关键不是“怎么加事件”，而是“怎么安全提取目标地址并防止默认跳转干扰轮播逻辑”。document.querySelector('.carousel').addEventListener('click', function (e) {
const item = e.target.closest('.carousel-item.active');
if (!item) return;
const linkEl = item.querySelector('a[href]');
if (linkEl && !e.defaultPrevented) {
e.preventDefault();
window.location.href = linkEl.href;
}
});
e.target.closest() 兼容性好（IE 不支持，但现代项目基本可忽略）!e.defaultPrevented 是为了兼容已有阻止跳转逻辑（比如轮播控制按钮也放在 a 里）data-href，就改用 item.dataset.href
Vue/React 中轮播图事件绑定为什么不能写在组件外层
Carousel 组件中，幻灯片 DOM 往往由组件内部动态渲染，且可能启用过渡动画、虚拟滚动或 key 重置。直接用 querySelector + addEventListener 绑定，极易因 DOM 错位、重复绑定或卸载未清理导致事件失效或多次触发。
v-for 渲染的 .carousel-item 上用 @click.native（非 Composition API）或 @click（Composition API + 模板中显式写）onClick 直接写在映射出的 JSX 元素上，别用 useEffect + addEventListener 去查 DOM轮播图 touchstart/touchend 事件被吞掉怎么办
touchstart 和 touchend 实现滑动，但这时点击事件（click）会延迟 300ms 且可能被取消。若你发现「点了没反应」，大概率是 touchstart 中调用了 e.preventDefault()，或轮播库本身阻止了默认行为。
轮播图事件最易被忽略的其实是「active 状态的判定时机」：很多轮播在切换动画结束前就更新了 touchstart 里无条件执行了 e.preventDefault() —— 应仅当判定为滑动手势时才阻止cursor: pointer 和 touch-action: manipulation，可加速点击响应并禁用双指缩放干扰pointerdown 替代 touchstart 和 mousedown，它在现代浏览器中已广泛支持.active 类，导致点击时拿到的是“将要显示”的项，而非用户实际看到的那张。务必确认你的轮播库或手写逻辑中，.active 类是在 CSS 过渡完成（transitionend）后才切换的。
