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. 总结
事件绑定要留神焦点元素,否则可能导致元素事件无奈触发。