使用箭头函数+setTimeout时无法访问点击元素getAttribute的问题排查

问题成因 #

• setTimeout回调的参数覆盖了外部事件对象：你在setTimeout的匿名回调里声明了参数e，但setTimeout的回调执行时并不会接收触摸事件的event对象，这个局部的e实际是undefined，调用e.currentTarget会直接报错，后续获取src的逻辑自然无法执行。
• 事件绑定目标与DOM查询逻辑冗余：事件绑定在figure img上，外部箭头函数里的e.currentTarget本身就是被点击的<img>元素，没必要再通过figure.querySelector("img")去查找，这属于多余操作，且会因前面的错误导致代码中断。

修正后的代码 #

let myTimeout;
const time = 2000;

$(document).on("touchstart", "figure img", (e) => {
  // 提前保存被点击的img元素，避免setTimeout回调无法访问事件对象
  const targetImg = e.currentTarget;
  myTimeout = setTimeout(() => {
    const src = targetImg.getAttribute("src");
    console.log("src>" + src);
    console.log("PRESS DELAY");
  }, time);
});

核心优化点 #

1. 提前在触摸事件的箭头函数内部保存目标元素targetImg，确保setTimeout回调能直接引用到该元素，无需依赖事件对象。
2. 移除setTimeout回调中的e参数，避免覆盖外部的事件变量。
3. 利用事件绑定的目标直接获取src，省去冗余的DOM查询步骤。

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