jquery resolves the blur event of the input element and other non-form element Click event Conflicts _jquery

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

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

The results you want to achieve:

1, the input box to get focus when value is "", loss of focus value is "default value";-----This is a good realization;

2, when in the input box to search for content, click Div Search, request the console print output to search the content of elements (of course, each project needs different, here is just an example), and require the click does not affect the input focus and blur behavior;----that's the point.

First 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); });

Results: Input "AAAA" in input, and then click Div, the console output is "default value", and the expected result does not match;

Workaround One: Add a timer in the Blur callback function to delay the execution time of the Blur callback function, so that while clicking on the Div, the blur behavior of input is triggered first, but due to the timer delay, So we have to wait until the div Click Callback executes to perform the callback of 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 invariant 
var value = $ ("input"). Val (); 
Console.log (value); });

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

workaround two: the div Click event changed to MouseDown event, because the MouseDown behavior is the mouse punctuation is triggered, and click behavior is the mouse punctuation down and then lifted when it was triggered

$ ("input"). focus (function () {//This part is invariant 
this.value = "";}). Blur (function () { 
this.value = "Default value";}); $ ("div"). MouseDown (function () { 
var value = $ ("input"). Val (); 
Console.log (value); });

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

The above is a small set of jquery to solve the input elements of the Blur event and other non-form elements Click event Conflict, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!