如何从jQuery事件监听器函数中返回值并存储到变量

你没法直接从事件监听器函数里return值并存储到外部变量，核心原因是事件监听器是异步触发的——外部代码会在用户点击之前就执行完毕，根本赶不上接收监听器里返回的值。这里给你几种可行的解决办法：

方法一：外部声明变量，监听器内部赋值 #

提前在监听器外部定义变量，等点击事件触发时，在监听器内部给这个变量赋值：

// 外部声明变量
let containerColor;

$(".container").click(function() {
  // 用$(this)指向当前被点击的元素，比重新选择更高效
  containerColor = $(this).css("background-color");
  // 此时可以直接使用这个变量，比如打印查看
  console.log(containerColor);
});

// 注意：如果在用户点击前直接访问containerColor，它会是undefined，因为点击事件还没触发

方法二：用回调函数处理获取到的值 #

如果你需要在拿到颜色后执行特定操作，用回调函数更稳妥，不用纠结变量的时机问题：

// 定义处理颜色的回调函数
function handleContainerColor(color) {
  // 这里写拿到颜色后要做的逻辑
  console.log("容器当前颜色：", color);
  // 比如把这个颜色应用到其他元素
  $(".some-other-element").css("border-color", color);
}

$(".container").click(function() {
  const color = $(this).css("background-color");
  // 调用回调函数，把颜色传进去
  handleContainerColor(color);
});

方法三：用Promise+async/await（适合复杂异步场景） #

如果你的业务逻辑涉及多个异步操作，可以用Promise封装点击事件，再通过async/await获取值：

// 封装获取颜色的Promise
function getContainerColor() {
  return new Promise((resolve) => {
    // 用.one()确保只监听一次点击
    $(".container").one("click", function() {
      resolve($(this).css("background-color"));
    });
  });
}

// 用async/await获取颜色
async function useColor() {
  const color = await getContainerColor();
  console.log("获取到的颜色：", color);
  // 后续的业务逻辑
}

useColor();

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