Solución al conflicto entre evento de desenfoque y evento de clic

Cuando diseñamos el cuadro de entrada, cuando el cuadro de entrada recibe el foco, aparece un icono detrás para eliminar el contenido ingresado sin perder el foco. Cuando el cuadro de entrada pierde el foco, el icono detrás de él desaparece.

Por lo tanto, el ícono de eliminar estará vinculado a un evento de clic.Cuando hacemos clic en el ícono de eliminar, el contenido del cuadro de entrada se borra.

Es decir, aparece el conflicto entre el desenfoque y el clic. Cuando hacemos clic en el botón Eliminar, también se activa el evento de desenfoque de la entrada. El evento de desenfoque hará que el cuadro de entrada pierda el foco y oculte el icono de eliminar, y se ejecuta el evento de desenfoque. antes del evento de clic del ícono, los íconos desaparecen, y mucho menos activan el evento de clic.

Demostración del problema

solución

Podemos agregar un evento mousedown para la eliminación del botón y ejecutar event.preventDefault() en él para evitar el evento predeterminado del navegador, de modo que el cuadro de entrada no pierda el foco cuando se hace clic en el botón.

Por supuesto, simplemente puede cambiar el evento de clic por el evento mousedown, porque el evento mousedown se ejecuta antes del evento de desenfoque y luego evita el comportamiento predeterminado, pero aún se recomienda la solución anterior.

Después de resolver

Código de muestra

<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>

复制代码