ぼかしイベントとクリックイベントの競合の解決策

入力ボックスをデザインするとき、入力ボックスにフォーカスが入ると、後ろにアイコンが表示され、フォーカスを失うことなく入力したコンテンツを削除します。入力ボックスにフォーカスがなくなると、後ろのアイコンが消えます。

したがって、削除アイコンはクリックイベントにバインドされます。削除アイコンをクリックすると、入力ボックスの内容がクリアされます。

つまり、ぼかしとクリックの競合が発生します。削除ボタンをクリックすると、入力のぼかしイベントもトリガーされます。ぼかしイベントにより、入力ボックスのフォーカスが失われ、削除アイコンが非表示になり、ぼかしイベントが実行されます。アイコンのクリックイベントの前に、アイコンは消え、クリックイベントをトリガーすることは言うまでもありません。

問題のデモンストレーション

解決

ボタンを削除するためのmousedownイベントを追加し、それにevent.preventDefault（）を実行して、ブラウザのデフォルトイベントを防ぎ、ボタンがクリックされたときに入力ボックスがフォーカスを失うことがないようにすることができます。

もちろん、クリックイベントを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>

复制代码