Splide Slide循环模式下设置perPage后元素点击失效问题

问题说明 #

使用Splide实现垂直向下（ttb）的循环滑块时，首次加载的5个元素可正常点击，但第二次循环的元素从顶部出现后，首次循环中仍处于可见状态的元素无法点击，当前屏幕上的5个可见元素里可能仅1个能点击。

解决方案 #

这个问题的核心是Splide的loop模式会自动克隆幻灯片实现无缝滚动，克隆的幻灯片未绑定原有的点击事件，或是克隆元素的DOM层级覆盖原元素导致点击被拦截。推荐采用以下可靠方案：

方案1：事件委托绑定点击逻辑 #

放弃在单个<SplideSlide>内绑定onClick，改为在父容器上通过事件委托监听点击，利用事件冒泡获取点击的图片资源。这种方式对原幻灯片和克隆幻灯片都生效，能确保所有可见图片都可点击。

修改后的完整代码：

import React from "react";
import styled from "styled-components";
import { Splide, SplideSlide } from '@splidejs/react-splide';
import { AutoScroll } from '@splidejs/splide-extension-auto-scroll';
import "@splidejs/splide/dist/css/splide.min.css";

const StyledBanner = styled.div`
    margin: 0% 0px 0% 10%;

    img{
        height: 70%;
        cursor: pointer; /* 添加上手型光标，提示元素可点击 */
    }
`

function Banner({ comics, cover1, cover2, cover3, cover4, cover5, setSelectedImage }) {
    // 通过事件委托处理所有图片点击
    const handleBannerClick = (e) => {
        if (e.target.tagName === 'IMG') {
            setSelectedImage(e.target.src);
        }
    };

    return (
        <StyledBanner onClick={handleBannerClick}>
            <Splide
                className="splide"
                aria-label="My Slide"
                options={{
                    type: 'loop',
                    direction: 'ttb',
                    throttle: 1,
                    height: '75vh',
                    drag: true,
                    focus: 'top',
                    perPage: 5,
                    arrows: false,
                    autoScroll: {
                        speed: -0.1,
                        pauseOnHover: false,
                        pauseOnFocus: false,
                    },
                }}
                extensions={{ AutoScroll }}
            >
                <SplideSlide>
                    <img src={cover1} alt="Image 1" />
                </SplideSlide>
                <SplideSlide>
                    <img src={cover2} alt="Image 2" />
                </SplideSlide>
                <SplideSlide>
                    <img src={cover3} alt="Image 3" />
                </SplideSlide>
                <SplideSlide>
                    <img src={cover4} alt="Image 4" />
                </SplideSlide>
                <SplideSlide>
                    <img src={cover5} alt="Image 5" />
                </SplideSlide>
            </Splide>
        </StyledBanner>
    );
}

export default Banner;

方案2：调整克隆元素层级（可选） #

若问题是克隆元素的z-index高于原元素导致点击被拦截，可通过CSS强制设置层级：

/* 原幻灯片设置更高层级 */
.splide__slide:not(.splide__slide--clone) {
    z-index: 2;
}
/* 克隆幻灯片设置较低层级 */
.splide__slide--clone {
    z-index: 1;
}

注意：这种方式可靠性低于事件委托，因为Splide的克隆逻辑可能动态调整DOM结构，层级设置可能失效。

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