When creating a new user, we need to verify that the user name is the same as the user name. When the input loses focus, we need to send a request for validation. However, we encountered a problem, when closing the popup box, we also trigger the request for validation, which is very unfriendly, as shown in the figure:
Make casually, the title of what we do not care about ha!
The first solution that came to mind was to add a logo to the Click event and check in blur. If the logo changes, no request is made, but that doesn’t work because the blur event fires before the Click event.
Then try setting a timer for the blur event to become an asynchronous event so that the Click event can be triggered first.
The idea is good, the reality is cruel, still fail.
There is a time difference between blur events and click events. Before the click event is executed, the timer has been triggered. According to the verification, there is about 100-200 ms time difference between blur events and Click events. As shown in figure:
At this point the request can be sent.
However, I also have a scene where the input loses focus and the content is added to the list below. Each column has a delete event. If the input is halfway through and you want to delete one of the columns, a blur event is triggered.
If the above method is used, each time the blur event is triggered, there will be a significant delay, which will be very uncomfortable, and then another solution is needed.
The reason for adding a timer to blur events is that blur events are triggered before click events. If the blur event can be triggered before blur events and the default event can be prevented at this time, there is no need to add a timer to blur events.
In this case, you need to bind the mouseDown event to the delete event, which takes precedence over the blur event.
Because I am too lazy, I will not do the picture above, it is not good to upload pictures at work.