JS DOM操作：如何取消HTML元素悬停/点击触发的DOM变更效果？

我完全理解你的需求——通过DOM操作修改元素样式后，需要在特定场景（比如鼠标移出、点击外部）下把元素恢复到初始状态。针对你提到的表单示例，我来一步步帮你解决这个问题。

首先，你目前的代码只实现了点击输入框时将表单背景改为黑色的逻辑，缺少反向恢复样式的部分。我们需要给对应的交互场景添加恢复操作：

完整解决方案代码 #

下面是一套可直接运行的完整代码，包含HTML、CSS和JavaScript：

HTML

<form id="myform">
  <input type="text" placeholder="请输入内容">
  <input type="email" placeholder="请输入邮箱">
</form>

CSS

#myform {
  background-color: lightblue;
  padding: 20px;
  width: 300px;
  transition: background-color 0.3s; /* 加过渡让样式变化更平滑自然 */
}
input {
  display: block;
  margin: 8px 0;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
}

JavaScript

const myform = document.getElementById('myform');
const inputElements = document.querySelectorAll("input");

// 封装设置黑色背景的函数，方便复用
function setFormBlackBg() {
  myform.style.backgroundColor = "black";
}

// 封装恢复浅蓝色背景的函数
function resetFormBg() {
  myform.style.backgroundColor = "lightblue";
}

// 给每个输入框绑定交互事件
inputElements.forEach(input => {
  // 点击输入框触发黑色背景
  input.addEventListener('click', setFormBlackBg);
  // 悬停输入框也触发黑色背景（如果需要这个效果的话）
  input.addEventListener('mouseenter', setFormBlackBg);
  // 鼠标移出输入框时立即恢复背景
  input.addEventListener('mouseleave', resetFormBg);
});

// 处理点击表单外部的场景
document.addEventListener('click', (event) => {
  // 判断点击的目标是否不在表单内部
  if (!myform.contains(event.target)) {
    resetFormBg();
  }
});

代码逻辑解释 #

1. 函数封装：把设置和重置背景的逻辑抽成独立函数，既方便复用，也让代码结构更清晰。
2. 悬停/移出交互：用mouseenter实现悬停触发黑色背景，mouseleave在鼠标离开输入框时立即恢复初始样式。
3. 外部点击检测：监听整个文档的点击事件，通过myform.contains(event.target)判断点击位置是否在表单内部——如果不在，就执行重置操作。
4. 过渡优化：CSS里添加transition属性，让背景色变化更平滑，提升用户体验。

额外优化建议 #

如果你的表单后续会新增很多输入框，可以用事件委托减少事件监听的数量，把事件绑定在表单本身而非每个输入框上：

// 事件委托版本：监听表单的点击和鼠标进入事件
myform.addEventListener('click', (e) => {
  if (e.target.tagName === 'INPUT') {
    setFormBlackBg();
  }
});

myform.addEventListener('mouseenter', (e) => {
  if (e.target.tagName === 'INPUT') {
    setFormBlackBg();
  }
});

myform.addEventListener('mouseleave', (e) => {
  if (e.target.tagName === 'INPUT') {
    resetFormBg();
  }
});

这样后续新增输入框时，不需要再单独绑定事件，代码扩展性更强。

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