In the treatment of the input box is cleared when the input, encountered a problem, when we input in the input box input box to get to the focus, input box will appear behind an icon to delete entered content, so delete icon will bind a click event, but when we click on the icon, also trigger the input of the blur event, The blur event causes the input to lose focus and the deleted icon to be hidden. The blur event is executed before the icon’s click event, so clicking on the icon does not delete what was entered in the input box. Instead, the icon disappears.

Let’s start with the blur and Click events

Blur event: Triggered when the element node loses focus. The event does not bubble.

Click event: The click event is emitted when an element is clicked; All elements have this event and bubble.

This is because the blur event fires before the click event, and javascript is single-threaded and can only handle one event at a time, so when blur executes, subsequent click events do not execute

PreventDefault () : Add a mousedown event to the icon and execute event.preventDefault() to prevent the browser’s default event so that the input field doesn’t lose focus when the button is clicked
<span v-if="showClear" @click="clear" @mousedown.prevent>X</span>  
Copy the code
Solution 2: Dynamically bind the BLUR event. When the mouse cursor moves over the parent element of the input box, remove the blur event from the input box. When the mouse cursor moves over the parent element of the input box, bind the blur event to the input box
handleBlur(event) {
  if (this.hovering) return;
  this.focused = false;
  this.$emit('blur', event);
},
Copy the code

reference

www.jianshu.com/p/791b30924…