jQuery中input事件内的focusout事件首次触发无效问题

嘿，我完全懂你遇到的这个小麻烦——正常操作时功能顺顺当当，但刷新页面后，之前输入又删除的操作就被页面“遗忘”，导致缩放逻辑直接失效对吧？这问题主要出在事件绑定的不合理性和初始状态未初始化上，咱们一步步把它搞定：

问题根源分析 #

你之前在focus事件里嵌套绑定focusout，会导致每次input聚焦时都重复绑定一次focusout事件，不仅可能引发不必要的重复触发，更关键的是：刷新页面后，页面的所有状态都会被重置，此时input是空的，但你的逻辑没有在页面加载时就初始化父div的状态，也没有实时判断input的当前值，自然就出现了功能失效的情况。

解决方案代码示例 #

咱们换一种更清晰的事件监听方式，同时加上页面加载时的状态初始化：

HTML结构

<div class="parent-box">
  <input type="text" id="target-input">
</div>

CSS样式

.parent-box {
  width: 220px;
  height: 60px;
  border: 1px solid #ddd;
  padding: 8px;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 放大的样式类 */
.parent-box.scaled-up {
  transform: scale(1.1);
  border-color: #2196F3;
}

JavaScript逻辑

const inputEl = document.getElementById('target-input');
const parentEl = inputEl.parentElement;

// 页面加载时先初始化父元素状态
initParentState();

// 监听input聚焦事件：直接放大父元素
inputEl.addEventListener('focus', () => {
  parentEl.classList.add('scaled-up');
});

// 监听input失焦事件：根据input值决定是否保持放大
inputEl.addEventListener('blur', () => {
  updateParentStateByInputValue();
});

// 辅助函数：初始化父元素状态
function initParentState() {
  if (inputEl.value.trim() !== '') {
    parentEl.classList.add('scaled-up');
  } else {
    parentEl.classList.remove('scaled-up');
  }
}

// 辅助函数：根据input当前值更新父元素状态
function updateParentStateByInputValue() {
  if (inputEl.value.trim() === '') {
    parentEl.classList.remove('scaled-up');
  } else {
    parentEl.classList.add('scaled-up');
  }
}

为什么这样能解决问题？ #

1. 避免事件嵌套绑定：分开监听focus和blur事件，不会出现重复绑定导致的逻辑混乱；
2. 初始化状态：页面加载时就调用initParentState()，不管input是空还是有残留值（比如刷新前没清空的情况），父元素都能有正确的初始状态；
3. 实时判断值：每次失焦时都直接检查input的当前值，不管是刚输入后删除，还是刷新后的空值，都能准确触发缩放逻辑。

这样不管是正常操作还是刷新页面，你的父div缩放功能都能稳定工作啦！

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