input的blur事件隐藏div,div上的onclick事件不生效解决方案

之前做一个项目，点击当获取input输入框的焦点时，将之前搜索的列表显示，失去焦点时隐藏这个列表，列表上有点击事件进行搜索【不使用插件和框架】。

问题：点击列表的时候不触发列表的点击事件？

<input type="text" name="" onfocus="show()" onblur="hide()" />
//这个input控制下面test列表div的显示和隐藏
<div id="test" onclick="clickThis()">test</div>

<script>
var div = document.getElementById("test");
	function show(){
		div.style.display="block"
	}
	function hide(){
		div.style.display="none"
	}

	function clickThis(){
		alert(div)
	}
</script>
</html>

原因：点列表的时候就相当于触发了input的blur事件，列表就隐藏了，点击事件就不生效了

解决方案如下：

1、在blur的回调函数中加一个定时器**，延迟blur回调函数的执行时间，这样的话虽然在点击div的时候，input的blur行为先被触发，但是由于加了定时器延迟，所以得等到div的click回调执行完成后才能执行input的blur行为的回调；

代码：

	function hide(){
		setTimeout(function(){ 
			div.style.display="none" 
		},300)}
	}

2、将div的click事件改成mousedown**事件，因为mousedown行为是鼠标点下去的时候就被触发，而click行为是鼠标点下去再抬起的时候才被触发

代码：

<div id="test" onmousedown="clickThis()">test</div>