之前做一个项目,点击当获取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>