A quick solution to the conflict problem of onclick and onblur _javascript skills

The search box on Sina's home page has a drop-down box with Ajax. We need to implement a click in the dropdown box, so that the value of the search box into this item, while the dropdown box disappears, but at the same time click Elsewhere, the dropdown box will also disappear. Roughly as shown:

We also use onblur and onclick to hide the dropdown box, but the larger problem arises, these two features conflict, onblur too strong, there is no chance of the OnClick method implementation, the search box can not get the content of the click item. This is the problem of the onclick and onblur conflicts we want to solve.

In response to this question, here are two ways to solve this problem:

1. Use settimeout to make the onblur time delay execution, so that the onclick execution after the execution of onblur. (The settimeout time setting should be above 100ms or not) The sample code is as follows:

<! DOCTYPE html>  

2.  use Document.onmousedown instead of onblur to implement the Hide dropdown box feature

<! DOCTYPE html>  

Above the onclick and onblur conflict resolution is a quick way to share the whole of the content of everyone, I hope to give you a reference, but also hope that we support the cloud-dwelling community.