Question

虽然我确实遇到了一个具体的问题，但我对是否有一个解决方案感兴趣，而不是下面我的例子。

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

我玩过onBlur和onFocusOut（看起来它可以用event.relatedTarget完成工作，但Firefox支持有限。）

很多时候我不得不做类似（伪jquery）的事情;

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

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

此外，这可能不会影响用户是否最小化其浏览器窗口e.t.c.所以必须有一个window.onBlur并将“虚假模糊”功能推送到所有元素。

我正在寻找一种“好”的方法，理想情况下无需为每个元素添加事件监听器。

NB;首选Vanilla Javascript代码（无jquery）

这是我正在玩的jsbin，表明如果你从输入中选择并点击文本节点，则无法判断它是否在容器元素内。 http://jsbin.com/hogot/6/edit

Answer 1

您可以使用事件捕获。

http://www.quirksmode.org/blog/archives/2008/04/delegating_the.html

的jsfiddle http://jsfiddle.net/60eL4nws/5/

HTML

<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>

JS

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
    }

});

处理'容器'的模糊事件而不将点击和焦点事件分配给一切

1 个答案: