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

Question

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

我试过e.relatedTarget（在谷歌浏览器上工作），但是这个变量不支持firefox（不支持）。所以我想要一些支持所有浏览器的e.relatedTarget替代解决方案。

编辑

jsfiddle

如在输出显示器，

Container21是contentEditable DIV具有绑定focusOut事件。

我想，如果用户点击以外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'); 
}); 

你检查FO当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); 
});