js 自制datalist选项列表出现后点击其他地方使其隐藏

前提是这样的：先做了个form，再往里加几个input，input用div包裹，然后自己用css做了个datalist，因为datalist标签难以实现自动填充后缀。

后来发现无法在出现datalist后点击其他地方使其隐藏，故使用document.activeElement判断点击事件是否在datalist上，如果不是则隐藏datalist。

html 制作input代码如下（已省略css）

<div>邮箱: <input type="text" size="15"  onblur="emailHidden()">
<div id="emailList"></div>
</div>

js 代码如下 （也省略了生成选项的js代码）

function emailHidden(){
    let elt = document.getElementById("emailList");
    let timeid = setInterval(function () {
        if(elt.activeElement !== elt) {elt.style.visibility = "hidden";clearInterval(timeid);}
    },200);
}

意思为 在input输入框失去焦点后触发 emailHidden 事件，调用 setInterval 每 200 毫秒循环判断焦点是否在 datalist 上，如果不是则隐藏 datalist 

这里的循环时间不能设置过小，否则点击datalist时也会隐藏datalist，可以按需求设置大一点。

注意：1、判断焦点用 hasFocus() 好像不行。

           2、Chrome、IE、edge、Firefox支持。

更新：

function emailHidden(){
    let elt = document.getElementById("emailList");
    let timeout = setTimeout(function () {
        if(elt.activeElement !== elt) {elt.style.visibility = "hidden";}
        else timeout();
    },200);
}