点击输入框表单边框变色，点击页面任意区域如何恢复原色？

核心思路 #

通过监听文档全局点击事件，判断点击区域是否属于表单内部，若不属于则移除表单高亮样式；同时处理事件冒泡，避免点击表单内元素时触发全局移除逻辑。

修改后的完整代码 #

HTML

<form action="">
    <input type="email" placeholder="Your E-mail Address">
    <button>Get Started</button>
</form>

CSS（保持原有代码不变）

form {
   display: flex;
   flex-direction: row;
   border: 2px solid rgb(226, 226, 226);
   border-radius: 30px;
   padding: 8px 8px;
   width: 78%;
   transition: all 300ms ease;
}

.on-click form {
   border: 2px solid #6415ff;
}

JavaScript

// 获取DOM元素
const input = document.querySelector('input[type="email"]');
const form = document.querySelector('form');
const body = document.body;

// 点击输入框时添加高亮样式
input.addEventListener('click', (e) => {
    e.stopPropagation(); // 阻止事件冒泡到文档
    body.classList.add('on-click');
});

// 点击表单内其他元素（如按钮）时，同样阻止冒泡
form.addEventListener('click', (e) => {
    e.stopPropagation();
});

// 点击文档任意区域时移除高亮样式
document.addEventListener('click', () => {
    body.classList.remove('on-click');
});

关键细节说明 #

1. 事件冒泡处理：
   点击输入框或表单内按钮时，通过e.stopPropagation()阻止事件向上传递到document，避免刚添加样式就被立即移除。

2. 类名操作优化：
   使用classList.add()和classList.remove()替代直接拼接类名，避免重复添加类名导致的样式异常（如多次点击后类名重复）。

3. 全局事件监听：
   给document绑定点击事件，只要点击区域不在表单内部，就移除on-click类，恢复表单原始边框样式。

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