Chrome中<img>事件处理器里x、y变量为何无法修改？

这确实是作用域遮蔽导致的问题，属于Chrome等浏览器处理内联事件处理器的特有行为。

为什么直接修改x无效？ #

当你在img的内联onLoad（或其他内联事件属性）里写代码时，这段代码的执行作用域会被特殊处理：它优先绑定到当前img元素的上下文，同时自动包含事件对象的属性。这里你访问的x、y其实是事件对象的内置属性（对应事件触发时的鼠标坐标值），属于当前事件处理上下文的局部变量——你修改的只是这个局部的x，完全碰不到全局的x变量，自然看起来像是“没生效”。

为什么调用函数就没问题？ #

如果把逻辑封装到单独的函数里，函数本身是在全局作用域定义的，函数内部访问的x默认指向全局变量，不会被内联事件的局部上下文遮蔽，所以修改能正常生效。

解决方法 #

给你几个可行的方案：

• 明确指定全局变量：直接用window.x代替x，强制访问全局作用域的变量，修改后的内联代码如下：

  <img src="https://media1.tenor.com/m/557GUrcXp14AAAAC/jinx-cat-javascript.gif" onLoad="alert(`x=${x}... Now setting x=100`);window.x=100;alert(`x=${window.x}\nNow it works!`)">
  

• 封装到独立函数：像你发现的那样，把逻辑写到全局函数里，内联事件只调用函数：

  function handleImgLoad() {
    alert(`x=${x}... Now setting x=100`);
    x = 100;
    alert(`x=${x}\nWell that works!`);
  }
  

  <img src="https://media1.tenor.com/m/557GUrcXp14AAAAC/jinx-cat-javascript.gif" onLoad="handleImgLoad()">
  

• 使用addEventListener绑定事件：彻底抛弃内联事件属性，用标准的事件绑定方式，完全避免作用域混淆：

  const img = document.querySelector('img');
  img.addEventListener('load', () => {
    alert(`x=${x}... Now setting x=100`);
    x = 100;
    alert(`x=${x}\nSuccess!`);
  });
  

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