如何確定哪個元素獲得焦點即11

Question

我想在（Chrome，6-10）或Firefox中的模糊事件中關注事件知道哪些元素將獲得焦點。 在Chrome和IE 11之前就可以使用下面的代碼：

$(input).focusout(function (event) { 
      "use strict"; 
      console.log("next focused element: ", event.relatedTarget); 
     }); 

在Firefox中，可以使用下面的代碼：

$(input).blur(function (event) { 
      "use strict"; 
      console.log("next focused element:", event.originalEvent.explicitOriginalTarget); 
      }); 

的問題是IE 11.我找不到任何在IE 11中這樣做的方法。有人找到了解決方案嗎？

這裏是用ie11進行測試的小提琴。 http://jsfiddle.net/govanm/y87sekzd/5/

Answer 1

我可以看到在註釋中共享的JSFiddle上的問題，並且我能夠想出一個解決方法。

此變通辦法的想法是，在focusout發生之前，目標元素中會出現一些select/focus事件觸發器。因此，我們可以通過使用一些輔助變量持續跟蹤：

var nextElement = null; 

$("input").on("select click mousedown pointerdown mspointerdown", function() { 
    nextElement = this; 
}); 

我使用時，選擇的元素（使用鼠標或鍵盤）和focusout事件之前發生，將會觸發不同的事件。

現在我們有nextElement，在當前元素的focusout事件中，我們將檢查event.relatedTarget的值。如果它不爲空（除IE11外），我們將使用它;如果它爲空（IE11），我們將使用nextElement變量而不是：

var nextFocus = event.relatedTarget ? event.relatedTarget : nextElement; 

$("#p1").append("<div>next focused element: " + nextFocus.id + "</div>"); 

這樣，我們也不會影響到其他瀏覽器的行爲，一旦IE11修復您在共享know bug它將工作評論。

整個代碼應該是這樣的：

var nextElement = null; 
 

 
$("input").on("select click mousedown pointerdown mspointerdown", function() { 
 
    nextElement = this; 
 
}); 
 

 
$("input").focusout(function (event) { 
 

 
    "use strict"; 
 

 
    var nextFocus = event.relatedTarget ? event.relatedTarget : nextElement; 
 

 
    $("#p1").append("<div>next focused element: " + nextFocus.id + "</div>"); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table class="group"> 
 
    <tbody> 
 
    <tr></tr> 
 
    <tr> 
 
     <td class="field_title"> 
 
      <div class="widget_title widget_committed"><span id="sales_responsbile_part_last_name_field-title">* Last name:</span> 
 
      </div> 
 
     </td> 
 
     <td class="field_widget"> 
 
      <div class="configurationWidget_configuration-custom-text-widget_0"> 
 
       <div class="widget_input"><input type="text" name="sales_responsbile_part_last_name_field" value="gf" id="in1"> 
 
       </div> 
 
      </div> 
 
     </td> 
 
     <td class="field_filler"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="field_title"> 
 
      <div class="widget_title widget_committed"><span id="sales_responsbile_part_first_name_field-title">* First name:</span> 
 
      </div> 
 
     </td> 
 
     <td class="field_widget"> 
 
      <div class="configurationWidget_configuration-custom-text-widget_0"> 
 
       <div class="widget_input"><input type="text" name="sales_responsbile_part_first_name_field" value="hj" id="in2"> 
 
       </div> 
 
      </div> 
 
     </td> 
 
     <td class="field_filler"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="field_title"> 
 
      <div class="widget_title widget_committed"><span id="sales_responsbile_part_title_field-title">Title:</span> 
 
      </div> 
 
     </td> 
 
     <td class="field_widget"> 
 
      <div class="configurationWidget_configuration-custom-text-widget_0"> 
 
       <div class="widget_input"><input type="text" name="sales_responsbile_part_title_field" value="hj" id="in3"></div> 
 
      </div> 
 
     </td> 
 
     <td class="field_filler"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="field_title"> 
 
      <div class="widget_title widget_committed"><span 
 
        id="sales_responsbile_part_phone_field-title">* Phone:</span></div> 
 
     </td> 
 
     <td class="field_widget"> 
 
      <div class="configurationWidget_configuration-custom-text-widget_0"> 
 
       <div class="widget_input"><input type="text" name="sales_responsbile_part_phone_field" value="jhjh" id="in4"> 
 
       </div> 
 
      </div> 
 
     </td> 
 
     <td class="field_filler"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="field_title"> 
 
      <div class="widget_title widget_committed"><span 
 
        id="sales_responsbile_part_mobile_field-title">Alt. phone:</span></div> 
 
     </td> 
 
     <td class="field_widget"> 
 
      <div class="configurationWidget_configuration-custom-text-widget_0"> 
 
       <div class="widget_input"><input type="text" name="sales_responsbile_part_mobile_field" value="hjh" id="in5"> 
 
       </div> 
 
      </div> 
 
     </td> 
 
     <td class="field_filler"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="field_title"> 
 
      <div class="widget_title widget_committed"><span 
 
        id="sales_responsbile_part_email_field-title">* E-mail:</span></div> 
 
     </td> 
 
     <td class="field_widget"> 
 
      <div class="configurationWidget_configuration-custom-text-widget_0"> 
 
       <div class="widget_input"><input type="text" name="sales_responsbile_part_email_field" value="hjh" id="in6"> 
 
       </div> 
 
      </div> 
 
     </td> 
 
     <td class="field_filler"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="field_title"> 
 
      <div class="widget_title widget_committed"><span id="sales_responsbile_part_sales_channel_field-title">Sales channel:</span> 
 
      </div> 
 
     </td> 
 
     <td class="field_widget"> 
 
      <div class="configurationWidget_configuration-custom-text-widget_0"> 
 
       <div class="widget_input"><input type="text" name="sales_responsbile_part_sales_channel_field" 
 
               value="hjh" id="in7"></div> 
 
      </div> 
 
     </td> 
 
     <td class="field_filler"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="field_title"> 
 
      <div class="widget_title widget_committed"><span 
 
        id="sales_responsbile_part_sales_responsbile_segment_field-title">Sales responsible segment:</span> 
 
      </div> 
 
     </td> 
 
     <td class="field_widget"> 
 
      <div class="configurationWidget_configuration-custom-text-widget_0"> 
 
       <div class="widget_input"><input type="text" 
 
               name="sales_responsbile_part_sales_responsbile_segment_field" 
 
               value="jhjh" id="in8"></div> 
 
      </div> 
 
     </td> 
 
     <td class="field_filler"></td> 
 
    </tr> 
 
    <tr> 
 
     <td class="field_title"> 
 
      <div class="widget_title widget_committed"><span id="sales_responsbile_part_sales_team_field-title">Sales team:</span> 
 
      </div> 
 
     </td> 
 
     <td class="field_widget"> 
 
      <div class="configurationWidget_configuration-custom-text-widget_0"> 
 
       <div class="widget_input"><input type="text" name="sales_responsbile_part_sales_team_field" value="hjh" id="in9"> 
 
       </div> 
 
      </div> 
 
     </td> 
 
     <td class="field_filler"></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<p id="p1">Test</p>

而且你可以看到它在此的jsfiddle：http://jsfiddle.net/y87sekzd/7/