旧版Edge 44中如何捕获文本输入框内置清除(X按钮)的触发事件

首先明确问题根因：

你使用的44.x版本Legacy Edge（EdgeHTML内核）中，输入框右侧的内置清除按钮是通过::-ms-clear伪元素渲染的非DOM节点UI组件，点击该按钮清空输入内容时，存在原生事件触发缺陷：会直接修改输入框的value为空字符串，但不会主动派发标准的input、change事件，仅在输入框后续失焦时才会补触发change事件，这是该版本内核的固有行为，和代码绑定方式无关。

可落地的捕获方案 #

按实现成本从低到高排序：

1. 基于鼠标事件冒泡识别清除按钮点击 #

因为::-ms-clear伪元素没有独立的DOM节点，无法直接绑定事件，但点击该区域时产生的鼠标事件会冒泡到绑定事件的<input>元素上，可通过前后值的快照对比判定清除操作：

• 给目标输入框绑定mousedown事件，鼠标按下瞬间记录当前输入框的value快照
• 在后续的mouseup事件触发时，读取输入框的最新value
• 对比两次值的差异：如果快照值非空、当前值为空，即可判定为点击了清除按钮，直接执行对应的响应逻辑
• 实现代码：

const queryInput = document.getElementById('query');
let valueSnapshot = '';

queryInput.addEventListener('mousedown', (e) => {
  valueSnapshot = e.target.value;
});

queryInput.addEventListener('mouseup', (e) => {
  const currentValue = e.target.value;
  // 匹配：点击前有值，点击后被清空
  if (valueSnapshot !== '' && currentValue === '') {
    // 此处执行清除操作对应的即时响应
    QueryChange(currentValue);
    QueryInput(currentValue);
  }
});

• 逻辑兼容性说明：这套判定不会和正常的文本选择、拖动选中等鼠标操作冲突——正常选中文本后松开鼠标，输入框的value不会被修改，不会误触发清除逻辑。

2. 聚焦状态下的低频率值检测 #

如果不想依赖鼠标交互逻辑，可以结合输入框的焦点状态做轻量值校验，避免无意义的后台资源消耗：

• 输入框获得焦点时，启动100ms间隔的值检测定时器，每次读取当前value和上一次快照做对比
• 只要检测到值发生非预期的变化（比如从非空变为空），直接执行对应的响应逻辑
• 输入框失焦时立刻清除定时器，停止后台检测
• 实现代码：

const queryInput = document.getElementById('query');
let lastValue = queryInput.value;
let checkTimer = null;

queryInput.addEventListener('focus', () => {
  checkTimer = setInterval(() => {
    const currentValue = queryInput.value;
    if (currentValue !== lastValue) {
      QueryInput(currentValue);
      QueryChange(currentValue);
      lastValue = currentValue;
    }
  }, 100);
});

queryInput.addEventListener('blur', () => {
  clearInterval(checkTimer);
});

• 性能说明：100ms的检测频率不会造成可感知的CPU占用，同时对用户操作的响应延迟在100ms以内，人眼基本无感知。

3. 替换原生清除按钮实现自定义逻辑 #

如果需要最稳定的兼容性，可直接隐藏Legacy Edge的原生清除按钮，自行实现和原生样式一致的清除控件：

/* 隐藏Legacy Edge输入框的原生清除按钮 */
input::-ms-clear {
  display: none;
}

在输入框外侧添加自定义的清除按钮，绑定标准click事件，点击时直接清空输入值并触发预设的响应逻辑，这种方式完全不受内核事件行为差异的影响，兼容性最可靠。

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