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

Question

一个div有一个有限的focusout事件。 OnFocusOut（方法名称）事件正在执行某些代码。但我想要哪个元素导致focusout事件。如果e.relatedTarget是div的子元素，则不要使用OnFocusOut方法执行代码。

我尝试了e.relatedTarget（使用谷歌浏览器），但此变量不适用于firefox（不支持）。所以我想为e.relatedTarget提供一些支持所有浏览器的替代解决方案。

修改

jsfiddle

作为输出中的显示，

Container21是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);
});