原生JS正确获取对象后，单击函数函数无效

Question

做轮播图，之前几个轮播图的按钮一直好好的，到了下边这个，获取按钮后click事件不能触发，不知道为什么，求解，感谢！！！

如图，可以获取到按钮，但是无论怎么点击，控制台什么内容都没有

HTML

<ul class="goods-list">
    <a href="javascript:;" class="img-list-btn">
        <i class="iconfont">&#xe667;</i>
    </a>
    <a href="javascript:;" class="img-list-btn">
        <i class="iconfont">&#xe6ab;</i>
    </a>
    <li>
        <a href="javascript:;">
            <img src="./img/carousel/1/1.jpg" class="transparent">
            <span>照相机</span>
            <span>
                <span>￥</span><strong>139.00</strong><del>￥439.00</del>
            </span>
        </a>
    </li>
    <li>
        <a href="javascript:;">
            <img src="./img/carousel/1/1.jpg" class="transparent">
            <span>照相机</span>
            <span>
                <span>￥</span><strong>139.00</strong><del>￥439.00</del>
            </span>
        </a>
    </li>

JS

    let prev03 = document.getElementsByClassName("goods-list")[0].getElementsByClassName("img-list-btn")[0];
    let next03 = document.getElementsByClassName("goods-list")[0].getElementsByClassName("img-list-btn")[1];
    
    console.log(prev03);
    
    prev03.addEventListener("click",click05);
    next03.addEventListener("click",click06);
    function click05(){
        console.log("触发了");
    }
    function click06(){
        console.log("触发了");
    }

Answer 1

1、看下事件绑定的时候按钮是否存在
2、看下按钮是否被图片遮挡

Answer 2

我复制你的代码点击正常！你写的没有问题，可能是css导致你点击不到，就如楼上所说，js代码是没有问题的 ！

Answer 3

有没有设置pointer-events: none;样式

Answer 4

z-index在position: absolute|relative|fixed的时候才会生效；元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。
建议看下层叠上下文的相关内容。

Answer 5

点击元素，到 Element - Eventlisterners 看一下事件绑定
或者输出一下元素的点击事件看一下，怀疑绑定失败！

建议这种绑定直接写 id,
id 本来就是为了绑定事件的，嵌套着找元素感觉容易找错，还不好写！
反正到 VUE，JS 找绑定元素就不怎么重要了