解决JavaScript点击事件中出现[object%20PointerEvent]的问题

问题根源 #

你给点击事件的回调函数定义了参数i，这个参数会被浏览器自动传入的PointerEvent事件对象覆盖，而非循环里的索引变量i。拼接路径时，事件对象被转为字符串[object PointerEvent]，导致生成错误路径../[object%20PointerEvent]1.png。

修正方案 #

方案1：移除回调函数的参数i

利用let在循环中形成的块级作用域，直接使用外部的索引变量i：

for(let i = 0; i < array.length; i++) {
    console.log(i);
    array[i].addEventListener("click", function nextImage() {
        image.src = "../" + i + ".png";
    });
}

方案2：使用箭头函数

箭头函数不绑定自身的参数，会继承外部作用域的i：

for(let i = 0; i < array.length; i++) {
    console.log(i);
    array[i].addEventListener("click", () => {
        image.src = "../" + i + ".png";
    });
}

补充说明 #

两种方案都能确保使用的是循环迭代时的索引值i，而非事件对象，从而生成正确的图片路径../1.png。

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