设置opacity为0且pointer-events为none的重叠幻灯片仍可被点击

我已经把幻灯片的opacity设为0，同时将pointer-events设置为none，但隐藏的幻灯片还是能被点击。我的轮播图有2张幻灯片，停在第一张时，点击它居然会触发第二张幻灯片的超链接。代码如下：

//programming slideshow

$(function () {
    var slide_index = 1;
    displaySlides(slide_index);
    function nextSlide() {
        displaySlides(slide_index++);
    }
    function prevslide() {
        displaySlides(slide_index--);
    }
    function displaySlides() {
        var i;
        var slides = document.getElementsByClassName("programming-slides");
        if (slide_index > slides.length) { slide_index = 1 }
        if (slide_index < 1) { slide_index = slides.length }
        for (i = 0; i < slides.length; i++) {
            slides[i].style.opacity = 0;
        }
        slides[slide_index - 1].style.opacity = 1;
        for (var i = 0; i < slides.length; i++) {
            // 如果幻灯片不可见，设置pointer-events为none
            if (slides[i].style.opacity === '0') {
                slides[i].style.pointerEvents = 'none';
            } else {
                // 否则设置为auto
                slides[i].style.pointerEvents = 'auto';
            }
        }
    }
    var next = document.getElementById('programming-next');
    next.addEventListener('click', nextSlide);

    var prev = document.getElementById('programming-prev');
    prev.addEventListener('click', prevslide);
})

问题出在你通过读取style.opacity判断幻灯片可见性的逻辑上——内联样式的opacity值可能存在格式差异（比如被浏览器解析为'0.0'而非'0'），导致判断失效，隐藏的幻灯片没被正确设置pointer-events: none。

直接根据幻灯片的索引判断是否为当前活跃幻灯片，逻辑更可靠，修改后的代码如下：

//programming slideshow

$(function () {
    var slide_index = 1;
    displaySlides(slide_index);
    function nextSlide() {
        displaySlides(slide_index++);
    }
    function prevslide() {
        displaySlides(slide_index--);
    }
    function displaySlides() {
        var i;
        var slides = document.getElementsByClassName("programming-slides");
        if (slide_index > slides.length) { slide_index = 1 }
        if (slide_index < 1) { slide_index = slides.length }
        
        // 合并循环，一次完成所有样式设置
        for (i = 0; i < slides.length; i++) {
            if (i === slide_index - 1) {
                // 当前显示的幻灯片：可见+允许点击+上层显示
                slides[i].style.opacity = 1;
                slides[i].style.pointerEvents = 'auto';
                slides[i].style.zIndex = 10;
            } else {
                // 隐藏的幻灯片：透明+禁止点击+下层显示
                slides[i].style.opacity = 0;
                slides[i].style.pointerEvents = 'none';
                slides[i].style.zIndex = 1;
            }
        }
    }
    var next = document.getElementById('programming-next');
    next.addEventListener('click', nextSlide);

    var prev = document.getElementById('programming-prev');
    prev.addEventListener('click', prevslide);
})

另外还添加了z-index设置：如果你的幻灯片是绝对定位重叠布局，隐藏的幻灯片可能会在可见幻灯片的上层，层级设置能确保点击只会落到当前可见的幻灯片上，双重保障避免误触发。

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