避免在儿童中失去焦点

Question

如果您找到更好的东西，请随时编辑问题标题。

我正在为我的网站写一个小插件，

＆＃13;

＆＃13;

var main = document.getElementById("main"),
  fakeInput = document.getElementById("fakeInput"),
  zone = document.getElementById("zone"),
  input = document.getElementById("input");

main.addEventListener("focusin", function() {
  zone.style.display = "block";
});
main.addEventListener("focusout", function() {
  zone.style.display = "none";
});

＆＃13;

#main {
  width: 200px;
}
#fakeInput {
  background: blue;
  height: 22px;
}
#zone {
  background-color: red;
  height: 100px;
  text-align: center;
}

＆＃13;

click in the blue zone :<br>
<div id="main" tabindex="-1">
  <div id="fakeInput"></div>
  <div id="zone" style="display:none">
    <p>Click in the input :</p>
    <input id="input" type="text" />
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

当我点击它时，它会打开（太棒了！）。我可以点击（几乎）任何地方，＃34;焦点＆＃34;事件未触发。 几乎是因为输入孩子将焦点偷走了它的父母。

我在这里阅读：http://www.quirksmode.org/dom/events/blurfocus.html

  

关注焦点和焦点

     

在焦点和模糊的同时开火，但泡沫

在我的示例中，似乎输入字段的focusin事件永远不会到达其父级。

我正在寻找解决此问题的方法，任何提示？

Answer 1

  

{em}或任何元素将focusout事件发送给元素   在它内部，失去焦点。这与blur事件不同   它支持检测父元素的焦点丢失（in   换句话说，它支持事件冒泡。

因此，这之间存在差异。

main.addEventListener("focusin", function() {
  zone.style.display = "block";
});
main.addEventListener("focusout", function() {
  zone.style.display = "none";
});

而且这个。

main.addEventListener("focus", function() {
  zone.style.display = "block";
});
main.addEventListener("blur", function() {
  zone.style.display = "none";
});

请参阅此JSFiddle。

Answer 2

  

在我的示例中，似乎输入字段的focusin事件永远不会到达其父级。

事实上确实如此。尝试添加一些调试：

main.addEventListener("focusin", function(event) {
  console.log('focusin', event.target)
  zone.style.display = "block";
});
main.addEventListener("focusout", function(event) {
  console.log('focusout', event.target)
  zone.style.display = "none";
});

你会看到