Glidejs轮播首尾元素on:click事件触发异常问题求助

问题描述 #

基于Glide.js实现的轮播组件中，点击图片幻灯片可打开预览模式，但首尾元素处于特定位置时，on:click事件无法触发。相关配置及结构如下：

原配置代码 #

onMount(async () => {
    bilder = await getData();

    setTimeout(() => {
        new Glide('.glide', {
            type: 'carousel',
            startAt: 0,
            perView: 3,
            focusAt: 'center',
            autoplay: 3000,
            hoverpause: true,
            keyboard: true,
            dragThreshold: false
        }).mount();
    }, 1);
});

原HTML结构 #

{#await images then items}
    <div class="glide">
        <div class="glide__track" data-glide-el="track">
            <ul class="glide__slides">
                {#each items as image, i}
                    {#if image.public}
                        <li class="glide__slide">
                            <img
                                on:click={() => {
                                    <!-- 有时无法触发 -->
                                    openImage(image.filepath);
                                }}
                                src={image.filepath}
                                alt={image.name}
                            />
                        </li>
                    {/if}
                {/each}
            </ul>
        </div>

        <div class="glide__arrows" data-glide-el="controls">
            <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
                <img src="/google-icons/arrow-back.svg" alt="prev" />
            </button>

            <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
                <img src="/google-icons/arrow-forward.svg" alt="next" />
            </button>
        </div>
    </div>
{/await}

问题原因 #

Glide.js的carousel模式会自动克隆首尾元素以实现无缝滚动效果，这些克隆元素不会继承Svelte模板中绑定的on:click事件；且当首尾元素处于边缘位置时，克隆元素可能覆盖在真实元素上方，导致点击事件触发在无绑定逻辑的克隆元素上，从而失效。

修复方案 #

1. 使用事件委托替代直接绑定 #

将点击事件绑定到父容器.glide__slides上，通过事件冒泡机制处理所有幻灯片图片的点击，同时给图片添加自定义属性存储路径，确保克隆元素也能携带该属性：

修改后的HTML结构

{#await images then items}
    <div class="glide">
        <div class="glide__track" data-glide-el="track">
            <!-- 给父容器绑定点击事件 -->
            <ul class="glide__slides" on:click={handleSlideClick}>
                {#each items as image, i}
                    {#if image.public}
                        <li class="glide__slide">
                            <img
                                data-src={image.filepath}
                                src={image.filepath}
                                alt={image.name}
                            />
                        </li>
                    {/if}
                {/each}
            </ul>
        </div>

        <div class="glide__arrows" data-glide-el="controls">
            <button class="glide__arrow glide__arrow--left" data-glide-dir="<">
                <img src="/google-icons/arrow-back.svg" alt="prev" />
            </button>

            <button class="glide__arrow glide__arrow--right" data-glide-dir=">">
                <img src="/google-icons/arrow-forward.svg" alt="next" />
            </button>
        </div>
    </div>
{/await}

添加点击处理函数

function handleSlideClick(event) {
    // 找到被点击的图片元素
    const targetImg = event.target.closest('img');
    if (targetImg) {
        // 从自定义属性中获取图片路径并调用预览
        const filepath = targetImg.dataset.src;
        openImage(filepath);
    }
}

2. 移除不必要的setTimeout延迟 #

由于{#await images then items}已经确保数据加载完成后才渲染DOM，无需用setTimeout延迟初始化Glide，直接在onMount中初始化即可：

onMount(async () => {
    bilder = await getData();
    // 去掉setTimeout，直接初始化
    new Glide('.glide', {
        type: 'carousel',
        startAt: 0,
        perView: 3,
        focusAt: 'center',
        autoplay: 3000,
        hoverpause: true,
        keyboard: true,
        dragThreshold: false
    }).mount();
});

修复原理 #

事件委托利用了DOM事件冒泡特性，父容器的点击事件能捕获所有子元素的点击；自定义属性data-src会被Glide克隆元素时复制，因此无论点击的是原始元素还是克隆元素，都能获取到正确的图片路径，确保openImage函数正常触发。

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