点击页面非目标区域时，如何撤销输入框背景色修改功能？

嘿，这个问题很好解决！我帮你梳理下思路，再给你完整的实现代码：

首先，我们需要区分两种点击场景：点击输入框所在区域（展开+红背景）、点击页面其他区域（收起+重置背景）。核心是要准确判断点击的目标是否属于输入框的容器，然后分别处理样式。

完整代码实现 #

HTML结构（补全你可能缺失的容器结构）

<div class="input-container">
  <input type="text" placeholder="点击我展开">
</div>

CSS样式（完善展开/收起的过渡效果）

* { box-sizing: border-box; }
body { background-color: black; }

.input-container {
  margin: 20px;
}

input[type=text] {
  padding: 8px 12px;
  border: none;
  border-radius: 4px;
  width: 120px;
  transition: width 0.3s ease;
  background-color: white; /* 默认背景色 */
}

/* 展开状态的样式 */
input[type=text].expanded {
  width: 300px;
}

JavaScript逻辑（处理点击事件和样式重置）

// 获取元素
const inputContainer = document.querySelector('.input-container');
const input = document.querySelector('input[type=text]');

// 你的原makeRed函数，优化后直接用已获取的input变量
function makeRed() {
  input.style.background = 'red';
}

// 点击输入框容器时：展开+设置红背景
inputContainer.addEventListener('click', () => {
  input.classList.add('expanded');
  makeRed();
});

// 点击页面其他区域时：收起+重置背景色
document.addEventListener('click', (e) => {
  // 判断点击目标是否不在输入框容器内
  if (!inputContainer.contains(e.target)) {
    input.classList.remove('expanded');
    input.style.background = ''; // 重置为CSS里的默认背景色
    // 也可以直接写默认值：input.style.background = 'white';
  }
});

关键逻辑说明 #

1. 点击容器内部：给容器绑定点击事件，触发展开（添加expanded类）并调用makeRed设置红背景。
2. 点击外部区域：给document绑定点击事件，通过inputContainer.contains(e.target)判断点击目标是否属于容器内部——如果不属于，就移除展开类，同时把input的background设为空（会自动回退到CSS里的默认样式）。
3. 为什么不用stopPropagation？这种判断目标的方式更灵活，不会干扰页面上其他元素的事件冒泡，兼容性和扩展性更好。

这样就能完美实现你要的效果啦：点击输入框区域展开变红，点击别处收起并恢复默认背景~

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