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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/LLDD2014425/article/details/79472908

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