如何停止输入框的mouseover与mouseout事件并保留click事件？

方案一：移除事件监听（彻底禁用） #

你之前用的event.preventDefault()和event.stopImmediatePropagation()无法解决问题，因为它们只影响当前事件的传播或默认行为，不能移除已绑定的事件监听。要彻底禁用mouseover和mouseout，需要用removeEventListener，但前提是绑定事件时要用命名函数（匿名函数无法被移除）。

代码示例：

// 先把事件回调改成命名函数
function handleMouseOver(event) {
  // 你的mouseover逻辑代码
}

function handleMouseOut(event) {
  // 你的mouseout逻辑代码
}

function handleClick(event) {
  // 你的click逻辑代码
  // 点击后移除mouseover和mouseout的监听
  input.removeEventListener("mouseover", handleMouseOver);
  input.removeEventListener("mouseout", handleMouseOut);
}

// 绑定事件
input.addEventListener("mouseover", handleMouseOver);
input.addEventListener("mouseout", handleMouseOut);
input.addEventListener("click", handleClick);

方案二：用状态变量控制回调执行（灵活可恢复） #

如果之后可能需要恢复mouseover和mouseout事件，用状态变量判断更合适，不需要移除监听，只在回调里加判断：

代码示例：

// 定义状态变量，标记输入框是否已激活
let isInputActive = false;

input.addEventListener("mouseover", function(event) {
  // 若输入框已激活，直接跳过逻辑
  if (isInputActive) return;
  // 你的mouseover逻辑代码
});

input.addEventListener("mouseout", function(event) {
  if (isInputActive) return;
  // 你的mouseout逻辑代码
});

input.addEventListener("click", function(event) {
  // 点击后标记输入框为激活状态
  isInputActive = true;
  // 你的click逻辑代码
});

为什么之前的方法无效？ #

• event.preventDefault()：仅用于阻止浏览器的默认行为（比如a标签跳转、表单提交），和事件监听的执行无关。
• event.stopImmediatePropagation()：仅阻止当前事件向上冒泡，以及当前元素后续绑定的同类型事件触发，但无法阻止该事件本身的逻辑执行，也不能影响后续触发的mouseover/mouseout事件。

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