记一次js事件冲突

1. 事件背景

项目原来需要在进入页面后focus一个可输入组件，比如说下拉输入框；在页面更新之后也会focus一个可输入组件。
后来增加了新需求：要求下拉输入框在下拉选择赋值的基础上，能直接输入关键字赋值。
直接输入关键字意味着需要在blur后向后台发送请求获取对应的值。
这样就存在一个问题：进入页面后focus下拉输入框A--》输入关键字--》失焦--》获取返回数据并赋值--》更新界面。如果是通过点击其他控件B失焦，那么这个B上绑定的mousedown后面的事件都将无法触发。

2. 相关知识

2.1 mousedown,mouseup,click,blur,focus事件的触发顺序：
html代码：

<div id="testBox">
    <div><button class="test-btn"></button></div>
    <div><input type="text" class="test-input"/></div>
</div>

js代码：

var btn = document.getElementsByClassName("test-btn")[0];
var input = document.getElementsByClassName("test-input")[0];
    btn.addEventListener("mousedown", function (e){
      console.log("mousedown-btn");
    });
    btn.addEventListener("mouseup", function (e){
      console.log("mouseup-btn");
    });
    btn.addEventListener("click", function (e){
      console.log("click-btn");
    });
    input.addEventListener("focus", function (e){
      console.log("focus-input");
    });
    input.addEventListener("blur", function (e){
      console.log("blur-input");
    });

操作：input输入然后点击button
结果："focus-input"--》"mousedown-btn"--》"blur-input"--》"mouseup-btn"--》"click-btn"
2.2 document.activeElement

3. 总结

事件绑定要注意焦点元素，否则可能导致元素事件无法触发。