el-input中点击清空按钮如何不触发click事件

要实现在el-input中点击清空按钮不触发click事件，可以使用以下方法：

1. 使用 @mousedown.prevent 替代 @click 事件来禁止默认行为。如下所示：

<el-input v-model="input" clearable @mousedown.prevent="clearInput"></el-input>

methods: {
  clearInput() {
    this.input = '';
  }
}

2. 在方法中使用 $refs 获取清空按钮元素，并使用 .blur() 方法使其失去焦点。如下所示：

<el-input v-model="input" clearable @click="clearInput"></el-input>

methods: {
  clearInput() {
    this.$refs.input.$refs.clearable.blur();
    this.input = '';
  }
}

这样就可以实现在点击清空按钮时不触发click事件。

相关问题

el-input中clear如何不触发click事件

你可以通过监听 `clear` 事件来实现在清空 `el-input` 的内容时不触发 `click` 事件。具体做法是，在 `el-input` 标签上添加 `@clear` 监听器，并在监听器方法中添加 `event.stopPropagation()`，如下所示：

<el-input v-model="inputValue" @clear="handleClear"></el-input>

methods: {
  handleClear(event) {
    event.stopPropagation();
    // 其他逻辑
  }
}

这样，在清空 `el-input` 的内容时，`click` 事件就不会被触发了。

el-input中clearable为true时点击清空会先处理clear事件，后面再点击任意地方则会触发blur事件，怎么避免blur事件在这种情况下触发

可以通过在 clear 事件中使用 `event.stopPropagation()` 方法来阻止点击 clear 按钮时触发的 click 事件继续冒泡到 el-input 上，从而避免触发 blur 事件。具体做法是，在 el-input 绑定 clear 事件，在事件处理函数中调用 `event.stopPropagation()` 方法，如下所示：

<el-input v-model="inputValue" clearable @clear="onClear"></el-input>

methods: {
  onClear(event) {
    event.stopPropagation();
    // do something else
    // ...
  }
}

这样，当用户点击清空按钮时，就不会触发 click 事件继续冒泡到 el-input 上，从而避免了触发 blur 事件的问题。