如何确定在ie 11中哪个元素获得焦点

Question

我想聚焦事件在(Chrome，即6-10)或在模糊事件在火狐知道哪些元素将得到关注。在11岁之前的chrome和IE中，可以使用以下代码：

$(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。我在IE11中找不到任何方法。有人找到了解决这个问题的方法吗？

这里是用于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的值。如果它不是null (除了IE11)，我们将使用它；如果它是null (IE11)，我们将使用nextElement变量：

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

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

这样，我们就不会影响其他浏览器上的行为，而且一旦IE11修复了您在注释中共享的知虫，它就会工作。

整个代码将如下所示：

​

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/上看到它