之前做一個專案，點選當獲取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>