blur事件与click事件冲突的解决办法

当我们在设计输入框时常常是当输入框获取焦点时，后面出现一个图标删除已输入的内容并且不会失去焦点，当输入框失去焦点时，后面的图标消失。

因此删除图标会绑定一个click事件，当我们点击删除图标的时候，清空输入框内容。

也就是这个时候blur和click的冲突就出现了，当我们点击删除按钮时也触发了input的blur事件，blur事件会让输入框失去焦点并且隐藏删除图标，而blur事件先于图标的click事件执行，图标都消失了，更别说触发click事件了。

问题演示

解决方案

我们可以再为按钮删除添加mousedown事件，在其中执行event.preventDefault()阻止浏览器默认事件，这样点击按钮时输入框就不会失去焦点了。

当然你可以更简单点将click事件改为mousedown事件，因为mousedown事件是先于blur事件执行的，再阻止默认行为，但是还是推荐上面一种方案。

解决后

样例代码

<template>
  <div>
    <div class="frame">
      <input
        type="text"
        class="input"
        ref="input"
        @focus="onFocus"
        @blur="onBlur"
      />
      <div v-show="isFocus" class="del" @click="clearInput" @mousedown.prevent>
        X
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { ref } from "vue";
export default {
  name: "App",
  setup() {
    let input = ref();
    const clearInput = (): void => {
      input.value.value = "";
    };

    let isFocus = ref<boolean>(false);
    const onBlur = (): void => {
      isFocus.value = false;
    };
    const onFocus = (): void => {
      isFocus.value = true;
    };
    return {
      input,
      clearInput,
      onBlur,
      onFocus,
      isFocus,
    };
  },
};
</script>



<style scoped>
.frame {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 200px;
  height: 32px;
  border: 1px solid #dcdfe6;
}
.input {
  outline: none;
  border: 0px;
  flex: 8;
}
.del {
  color: #dcdfe6;
  flex: 2;
}
</style>

复制代码