Javascript 处理'的模糊事件；集装箱'；无需为所有内容分配单击和聚焦事件

虽然我确实有一个特定的问题，但我感兴趣的是，除了下面的示例之外，是否还有其他解决方案

我想在用户失去焦点时隐藏一个元素（div e.t.c.）

我使用过onBlur和onFocusOut（它似乎可以通过

event.relatedTarget

完成这项工作，但Firefox的支持有限）

很多时候我不得不做一些事情，比如（伪jquery）

但我真的不喜欢在文档中的每个元素上设置焦点并单击事件

此外，如果用户最小化其浏览器窗口e.t.c，则这可能无法解释，因此还必须具有window.onBlur并将“人造模糊”功能推送到所有元素

我正在寻找一种“好”的方法来实现这一点，理想情况下不必向每个元素添加事件侦听器

铌；首选普通Javascript代码（无jquery）

---

这里有一个我正在使用的jsbin，它表明如果您从一个输入点点击一个文本节点，您无法判断它是否在容器元素中

您可以使用事件捕获

JSFIDLE

HTML

---

您应该首先将其标记为jquery。第二，你听说过事件委托吗？我实际上并没有使用jQuery，我更愿意不使用jQuery，事实上，在底部我声明首选香草Javascript。jQuery只是为了缩短示例代码。您的最佳选择可能仍然是活动代表团。我的想法是这样做并使用relatedTarget，但是我不确定relatedTarget的可靠性。如果只单击文本节点，则会得到“null”作为relatedTarget，因此我无法检查它是否在当前元素中。你是说使用模糊吗？我不确定这是否准确回答了问题。我正在尝试检测从一个div（可能包含一些输入）到任何其他元素、文本节点（单击，聚焦于另一个输入，移动到另一个窗口，e.t.c.）的模糊。这将在DOM树的任何级别捕获页面上的任何模糊事件，甚至在div模糊时捕获。-是的，但我看不出如何从输入中开始，只需单击文档正文或某个段落，就知道您没有在正在侦听的“容器”div中单击。侦听器捕获任何级别上模糊的元素。查看控制台日志以确认。如果您只是将侦听器附加到document.body，那么它将捕获页面中所有元素的所有模糊事件。这些都不适用于我。我必须在body标记上直接添加一个“onblur”属性，或者调用“window.addEventListener（'blur'，handler，true）”。用于blur的document.body.addEventListener不起作用。

$('*').on('focus,click', function() {
    // If this is not a descendant of .toolbar
       // run .toolbar faux blur event
});

<form>
    <input name="first_name" type="text" />
    <input name="first_name" type="text" />
    <input name="first_name" type="text" />
    <input name="first_name" type="text" />
    <input name="first_name" type="text" />
    <input name="first_name" type="text" />
    <input name="first_name" type="text" />
    <input name="first_name" type="text" />
    <input name="first_name" type="text" />
    <input name="first_name" type="text" />
    <input name="first_name" type="text" />
    <input name="first_name" type="text" />
    <input name="first_name" type="text" />
</form>

function handler(event) {
    console.log(event);
}

document.addEventListener("DOMContentLoaded", function(event) {

    // Firefox    
    if (navigator.userAgent.indexOf('Firefox')>=0) {    
        document.body.addEventListener('blur', handler, true);

    // Opera, Safari/Chrome
    } else if (document.body.addEventListener) {
        document.body.addEventListener('DOMFocusOut', handler, true)

    // IE
    } else {
        document.body.onfocusout = handler
    }

});