关于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. 总结

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