避免孩子注意力不集中

Question

如果您发现更好的内容，请随时编辑问题标题。

---

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

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";
});

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

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>

当我点击它时，它会打开（太棒了！）。我可以（几乎）在任何地方单击，不会触发“focusout”事件。 几乎，因为输入子项将焦点转移到其父项。

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

聚焦和聚焦

在对焦和模糊的同时触发，但会冒泡

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

我正在寻找解决此问题的方法，有什么提示吗？

Answer 1

focusout 事件被发送到一个元素，或任何元素 在里面，失去焦点。这与 blur 事件不同 它支持检测父元素失去焦点（在 换句话说，它支持事件冒泡）。

因此这之间是有区别的。

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

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

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

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";
});

你会看到