JS (jquery) resolves the input element's Blur event and other non-form element's Click event conflict methods

HTML structure: Very simple, just a input, a div, can explain the problem is OK;

<input type= "text" value= "default" ><br/><br/>
<div> Search </div>

1, the input box gets the focus when value is "", the value is "default" when the focus is lost;-----This is very good implementation;
2, when you enter the content in the input box, click on the div search, the control desk print output to search for the content (of course, the requirements of each project is different, here is just an example), and requires that the click does not affect the input focus and blur behavior;----This is the point.

Let's look at the effect before the conflict is resolved;

 $ ("input"). focus (function () {
 This.value = ""; 
}).  Blur (function () {
 This.value = "Default value"; 
 });    
 
 $ ("div"). Click (function () {
 var value = $ ("input"). Val (); 
 Console.log (value); 
}); 
 
  result: enter "AAAA" in input, then click Div, the console output is "default", Inconsistent with the expected results; 
 
  
 
   resolve Method One: Add a timer to the Blur callback function, delaying the execution time of the Blur callback function, so that although the blur behavior of input is triggered when the div is clicked, the timer delay is added, 
 Therefore, the      is not executed until the click callback of the div finishes execution. The callback for the blur behavior of input;   

$ ("input"). focus (function () {
    This.value = "";
}). blur (function () {
   var self=this;
    SetTimeout (function () {
        Self.value = "Default value";
 },300)
});

$ ("div"). Click (function () {//This part is not changed
    var value = $ ("input"). Val ();
    Console.log (value);
});

Result: Input "AAAA" in input, and then click Div, the console output is "AAAA", in line with the expected results;

workaround Two: Change the click event of the Div to the MouseDown event, because The   mousedown behavior is triggered when the mouse punctuation goes down, and the click behavior is triggered when the mouse punctuation is lifted.

$ ("input"). focus (function () {//This part does not change
 This.value = "";
}). blur (function () {
 This.value = "Default value";
});

$ ("div"). MouseDown (function () {
    var value = $ ("input"). Val ();
    Console.log (value);
});

Result: Input "AAAA" in input, and then click Div, the console output is "AAAA", in line with the expected results;

JS (jquery) resolves the input element's Blur event and other non-form element's Click event conflict methods