如何在Vue中精准监听搜索输入框清除(X)按钮点击以执行自定义函数

• 给搜索输入框绑定全局点击事件后，只要点击输入框任意位置就会进入回调，和实际触发的动作无关
• 仅靠判断this.info === ''的兜底逻辑，会把用户手动全选删除、初始聚焦输入框、无内容时点击输入框等场景全部误判为“点击了清除按钮”

方案1：基于点击坐标识别原生清除按钮 #

核心逻辑是利用浏览器原生type="search"输入框清除按钮的固定位置特征做判断：主流浏览器的清除按钮固定在输入框右侧内边距区域，宽度为16px左右，点击该位置时的事件水平偏移量会落在输入框最右侧的固定区域。该方案不需要改动原有输入框的视觉效果，适合对UI一致性要求不高、不想调整原有结构的场景。

配套JS代码：

new Vue({
  el: "#app",
  data: {
    msg: 'the input is cleaned',
    info: '',
    lastInputValue: ''
  },
  methods: {
    handleSearchClick(e) {
      const inputEl = e.target
      // 判断点击位置是否落在原生清除按钮的区域
      const clickInClearArea = e.offsetX > inputEl.clientWidth - 16
      // 同时满足两个条件才触发自定义逻辑：点击位置正确、输入值确实从非空变为空
      if (clickInClearArea && this.info === '' && this.lastInputValue !== '') {
        alert(this.msg)
      }
      // 更新上一次的输入值记录
      this.lastInputValue = this.info
    },
    // 手动输入/删除时同步记录值，避免误判
    handleInput() {
      this.lastInputValue = this.info
    }
  }
})

页面结构调整：

<div id="app">
  <input 
    type="search" 
    v-model="info" 
    @click="handleSearchClick"
    @input="handleInput"
  >
  <br>
  <span>{{ info }}</span>
</div>

方案2：自定义替换原生清除按钮（生产环境更推荐） #

原生清除按钮是浏览器实现的伪元素，无法直接绑定事件，判断逻辑存在跨浏览器兼容风险。可以直接隐藏原生清除按钮，自己实现一个和输入框绑定的清除控件，所有触发逻辑完全可控，不存在误判问题。

配套CSS：

/* 隐藏Chrome等内核浏览器的原生search清除按钮 */
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

页面结构：

<div id="app" style="position: relative; width: fit-content;">
  <input 
    type="search" 
    v-model="info" 
    style="padding-right: 24px;"
  >
  <span 
    v-if="info" 
    @click="handleCustomClear"
    style="position: absolute; right: 6px; top: 50%; transform: translateY(-50%); cursor: pointer;"
  >×</span>
  <br>
  <span>{{ info }}</span>
</div>

对应方法逻辑：

methods: {
  handleCustomClear() {
    this.info = ''
    // 此处执行清空后的自定义逻辑，不会被其他点击场景误触发
    alert(this.msg)
  }
}

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