Question

当引发 FocusOut 事件时，您如何知道哪个元素获得焦点？

正确的方法似乎是使用事件的 relatedTarget 属性。但是，这似乎并不适用于所有浏览器：

在谷歌浏览器中，它可以正常工作
在Firefox和Internet Explorer中，relatedTarget为null
，relatedTarget属性甚至不存在

我找到了一个仅适用于IE的解决方法（使用document.activeElement），但我想知道是否有一个通用解决方案已经证明适用于所有主流浏览器。

虽然我可以找到类似的问题和答案，但我找不到任何真正适用于所有浏览器的解决方案。

编辑：下面的例子显示了我的意思。

HTML：

<input id="text1" type="text" value="first" />
<input id="text2" type="text" value="second" />

的Javascript / JQuery的：

$('#text1').focusout(function(e) {
    // At this point, I want to know which element is receiving the focus (i.e. text2)
    alert(e.relatedTarget); // works in Chrome
    alert(document.activeElement); // works in IE
    // both do not work in Firefox or Safari
});

Answer 1

我有一个firefox的假设和解决方法。 document.activeElement似乎有效。然后聚焦命中，所以它被删除。当焦点击中（或者可能紧接着）时，将再次出现焦点元素。但是在out和in之间没有任何重点，所以没有任何元素被报告为活跃的。

我的解决方法是一个愚蠢的setTimeout hack。 setTimeout( function() {console.log(document.activeElement)}, 1);可靠地让我成为一个活跃的元素。当然，我只在一台机器上进行了测试，花了整整90秒这样做，但这是迄今为止我发现的最好的。

Answer 2

我相信您正在寻找的是document.activeElement。

返回当前关注的元素，即，如果用户键入any，将获取击键事件的元素。该属性是只读的。

https://developer.mozilla.org/en-US/docs/Web/API/document.activeElement

Answer 3

//attach a focus out handler
$("#id").focusOut($El_FocusOut);

//display the id of new element being focused onto
function $El_FocusOut($eventArgs){
    //firefox specific focusout active element logi
    var activeElement = $eventArgs.originalEvent.explicitOriginalTarget;
    alert($(activeElement).attr("id"))
}

Answer 4

我使用textEditor PrimeFaces元素遇到了同样的问题。

我使用以下html代码。

<div contenteditable="true" class="div-focus"> 
    <h:outputText
        styleClass="OutputField" 
        value="#{oController.panelTpl.getComment()}"  
        escape="false"
        />
</div>    
<div class="text-editor"> 
    <p:textEditor 
       value="#{oController.panelTpl.txtComment.text}"
       />
</div>

TextArea定义了两次，以便在显示表单时，用户只能看到第一个＆lt; div＆gt;没有看到特定工具栏的小部件。

当用户点击显示的文字时，focusin（）事件会隐藏＆lt; div class =＆＃34; div-focus＆＃34;＆gt;元素并显示＆lt; p：textEditor＆gt;小部件包含在＆lt; div class =＆＃34; text-editor＆＃34;＆gt;父元素。

为此，我定义了以下javascript代码

function onLoadDialog()
    {
    jQuery(".text-editor").hide();

    jQuery(".div-focus").focusin(function()
        {
        $(this).hide();
        $(this).next(".text-editor").show();
        $(this).next(".text-editor").focus();
        });            

    jQuery(".text-editor").focusout(function(e)
        {
        if ($(e.relatedTarget).closest(".text-editor").size() == 0)
            {
            $(this).hide();
            $(this).prev(".div-focus").show();
            $(this).prev(".div-focus").text($(this).text());
            }
        });            
    }

onLoadDialog函数（）在加载页面时被调用，用于隐藏＆lt; div class =＆＃34; text-editor＆gt;元素和定义的focusin（）和focusout（）事件。

focusin（）事件隐藏＆lt; div class =＆＃34; div-focus＆＃34;＆gt;元素和显示＆lt; div class =＆＃34; text-editor＆＃34;＆gt;元件。当用户点击＆lt; div class =＆＃34; div-focus＆＃34;＆gt;中的文字时元素，隐藏此元素并显示以下隐藏元素。＆lt; div class =＆＃34; text-editor＆＃34;＆gt;元素获得焦点。

focusout（）事件隐藏＆lt; div class =＆＃34; text-editor＆＃34;＆gt;元素和显示＆lt; div class =＆＃34; div-focus＆＃34;＆gt; element ...仅当获得焦点的元素未在＆lt; div class =＆＃34; text-editor＆＃34;＆gt;中定义时元件。

element.focusout（）的问题在于，每当元素包含在主元素中时，即使获得焦点的元素在同一元素中定义，也会触发它。

当您进入房屋时，您可以通过车库或客厅或厨房进入。当你进入客厅（通过外门），你进入建筑物。但是当你离开客厅去厨房时，你就呆在家里！如果你离开客厅去花园，你就会离开房子（建筑物）。

focusin（）函数实现相同的原理，但不是focusout（）！

if（$（e.relatedTarget）.closest（＆＃34; .text-editor＆＃34;）。size（）== 0）在focusout（）事件中使用的行纠正这个小差异！

注意：解决方案并不完美，因为在将文本从textEditor小部件复制到outputText小部件而没有格式化时，我有一些小问题需要解决！

JavaScript FocusOut - 获取获得焦点的元素

4 个答案: