input의blur 이벤트는div를 숨기고,div의onclick 이벤트는 해결 방안이 적용되지 않습니다

이전에 프로젝트를 만들었습니다. input 입력 상자의 초점을 가져올 때 이전에 검색한 목록을 표시하고 초점을 잃을 때 이 목록을 숨깁니다. 목록에 이벤트를 클릭하여 검색합니다. [플러그인과 프레임워크를 사용하지 않습니다.]
질문: 목록을 눌렀을 때 목록의 클릭 이벤트를 터치하지 않나요?

<input type="text" name="" onfocus="show()" onblur="hide()" />
//  input    test  div      
<div id="test" onclick="clickThis()">testdiv>

<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의 클릭 이벤트를 mousedown 이벤트로 변경합니다. 왜냐하면 mousedown 행위는 마우스가 눌렸을 때 터치되고 클릭 행위는 마우스가 눌렸을 때 다시 들어올릴 때 터치되기 때문입니다.
코드:

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