关于javascript:记一次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. 总结

事件绑定要留神焦点元素，否则可能导致元素事件无奈触发。