There is a drop-down box using ajax in the search box on Sina homepage. We need to implement a click item in the drop-down box to make the value in the search box become this item, and the drop-down box disappears, but at the same time, when clicking on other places, the drop-down box will also disappear. As shown in the figure:
We use onblur and onclick to hide the drop-down box, but a bigger problem arises. These two functions conflict. Onblur is too powerful and there is no chance to implement the onclick method. The search box cannot get the content of the click item. This is the onclick and onblur conflict problem we want to resolve.
For this problem, we introduce two solutions:
1. Use setTimeout to delay the execution of onblur time, and then execute onblur after the execution of onclick. (The time setting of setTimeout should be above 100ms, otherwise it still does not work) The example code is as follows:
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none; } form{ width: 500px; margin: 0 auto; position: relative; zoom: 1; } form: after{ clear: both; content: ""; display:block; } .text{ float:left; border: 1px solid #cccccc; padding-left: 14px; width: 300px; height: 34px; line-height:34px; font-size:14px; } .button{ width:50px; height:34px; border:1px solid #cccccc; line-height:34px; font-size:14px; color:#ffffff; background:#ff8400; } ul{ position:absolute; top:36px; left:0; width:300px; border-right:1px solid #cccccc; border-left:1px solid #cccccc; background:green; display:none; } li{ font-size:14px; line-height:34px; height:34px; color:#000000; border-bottom:1px solid #cccccc; } li:hover{ background:yellow; color:red; cursor:pointer; } </style> <script> window.onload=function(){ var oText=document.getElementById('text'); var oUl=document.getElementById('ul'); var aLi=oUl.getElementsByTagName('li'); var timer=null; oText.onfocus=function(){ this.value=''; oUl.style.display='block'; for(var i=0;i<aLi.length;i++){ aLi[i].onclick=function(){ clearTimeout(timer); oText.value=this.innerHTML; oUl.style.display='none'; }; } }; oText.onblur=function(){ timer=setTimeout(function(){ oUl.style.display='none'; if(!oText.value){ oText.value='Please enter keyword'; } },120); }; }; </script> </head><body><form> <input type="text" value="Please enter keyword" id="text"/> <input type="button" value="Search"/> <ul id="ul"> <li>Return whether the window has been closed</li> <li>Return the height of the document display area of the window</li> <li>Return the width of the document display area of the window. </li> <li>Set or return the name of the window. </li> <li>Return to the external height of the window. </li> </ul></form> </body></html>2. Use document.onmousedown to replace onblur to implement the hidden drop-down function
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; list-style: none; } form{ width: 500px; margin: 0 auto; position: relative; zoom: 1; } form: after{ clear: both; content: ""; display:block; } .text{ float:left; border: 1px solid #cccccc; padding-left: 14px; width: 300px; height: 34px; line-height:34px; font-size:14px; } .button{ width:50px; height:34px; border:1px solid #cccccc; line-height:34px; font-size:14px; color:#ffffff; background:#ff8400; } ul{ position:absolute; top:36px; left:0; width:300px; border-right:1px solid #cccccc; border-left:1px solid #cccccc; background:green; display:none; } li{ font-size:14px; line-height:34px; height:34px; color:#000000; border-bottom:1px solid #cccccc; } li:hover{ background:yellow; color:red; cursor:pointer; } </style> <script> window.onload=function(){ var oText=document.getElementById('text'); var oUl=document.getElementById('ul'); var aLi=oUl.getElementsByTagName('li'); var timer=null; oText.onfocus=function(){ this.value=''; oUl.style.display='block'; for(var i=0;i<aLi.length;i++){ aLi[i].onclick=function(){ clearTimeout(timer); oText.value=this.innerHTML; oUl.style.display='none'; }; } }; document.onmousedown=function(ev){ var oEvent=ev||event; var target=oEvent.target||oEvent.srcElement; if(target.parentNode!==oUl&&target!==oText){ oUl.style.display='none'; } }; oText.onblur=function(){ if(!oText.value){ oText.value='Please enter keyword'; } }; }; </script> </head><body><form> <input type="text" value="Please enter keyword" id="text"/> <input type="button" value="Search"/> <ul id="ul"> <li>Return whether the window has been closed</li> <li>Return the height of the document display area of the window</li> <li>Returns to the width of the document display area of the window. </li> <li>Set or return the name of the window. </li> <li>Return to the external height of the window. </li> </ul></form> </body></html>The quick solution to the above conflict problem of onclick and onblur is all the content I share with you. I hope you can give you a reference and I hope you can support Wulin.com more.