javascript - 如何获取哪个元素导致 div 的模糊事件

Question

一个div有一个有界的focusout事件。 OnFocusOut(方法名称)事件某些代码正在执行。但我想要哪个元素导致 focusout 事件。如果 e.latedTarget 是该 div 的子元素，则不要执行 OnFocusOut 方法中的代码。

我尝试了e.latedTarget(在google chrome上工作)，但是这个变量不适用于firefox(不支持)。所以我想要一些支持所有浏览器的 e.latedTarget 替代解决方案。

编辑

jsfiddle

如输出中所示，

Container21 是绑定(bind)了 focusout 事件的 contentEditable div。

我希望如果用户点击 container22 之外的其他内容，则 doSomthing()

一个限制是我无法在剩余元素上添加点击事件。

Answer 1

如果您的 Container22 是一个可以获得焦点的元素，您可以在您的模糊事件中检查它是否具有焦点:

$('#container21').blur(function(){
    // timeout because focus does not switch immediately
    setTimeout(function(){
        if (document.activeElement === document.getElementById('container22')) {
            // your logic here: container22 has focus
        } else {
            // your logic here: container22 does not have focus
        }
    }, 60);
});

如果 Container22 无法获得焦点，您可以给它一个类:

$('#container22').click(function(){
    $(this).addClass('fake-focus');
});

当 Container21 获得焦点时，您删除该类:

$('#container21').focus(function(){
    $('#container22').removeClass('fake-focus');
});

当 Container21 失去焦点时，您会检查该类 - 如果 Container22 具有该类，则意味着用户单击它来聚焦。我们再次需要超时，因为点击事件将在失去焦点后发生。

$('#container21').blur(function(){
    // timeout because focus does not switch immediately
    setTimeout(function(){
        if ($('#container22').hasClass('fake-focus')) {
            // your logic here: container22 was clicked
        } else {
            // your logic here: container22 was not clicked
        }
    }, 60);
});