javascript - 如何检查表格是否失焦

Question

我正在尝试检查表单是否失焦，因此我可以相应地操作 DOM。

我试过这样的:

$("#dialog-form").on("focusout", function () {       
    if ($(document.activeElement).parents('#dialog-form').length === 0) {
        //Do some stuff...
    };
});

因为 focusout 绑定(bind)到所有子元素，所以即使我在表单中的元素之间移动焦点时也会触发此事件。问题是，length 总是返回 0，所以……显然这是错误的。

是否有关于该主题的最佳实践？

编辑:(cshtml)

@model IEnumerable<TasksWebApp.Task>
<h2>Tasks Managment Tool</h2>
<hr />
<br />
<ul id="MainUL">
    @{foreach (var item in Model)
      {
        <li id="li_@item.Name">
            <div class="taskContainer">
                @if (item.SubTasks.Count > 0)
                {
                    <div class="expand">
                        <button>Expand</button>
                    </div>
                }
                <div class="erase">
                    <button>Erase Task</button>
                </div>
                <div class="addSubClass">
                    <button>Add Sub-Class</button>
                </div>
                <div class="taskDetails">
                    Name: <span>@item.Name</span>&nbsp;
                    Owner: <span>@item.Owner</span>

                </div>
            </div>
            <ul></ul>
        </li>
        
      }
    }
</ul>

<div id="AddMainItem">
    <button>Add Main Item</button>
</div>

<div id="dialog-form" title="Create New Task">
    <p class="formHeadPar">All form fields are required:</p>
    <p id="FormComments"></p>
    <form id="AddTaskForm">

        <label for="newTaskName">Name:</label>
        <input type="text" name="newTaskName" id="newTaskName" placeholder="Task Name" />
        <label for="newTaskOwner">Owner:</label>
        <input type="text" name="newTaskOwner" id="newTaskOwner" placeholder="Task Owner" />

        <input type="submit" tabindex="1" value="Add Task" />
        <button id="CloseForm">Close Form</button>

    </form>
</div>

Answer 1

您可以将所选对象与 document.activeElement 进行比较，其中包含具有焦点的当前元素。但请注意，它只能包含能够击键的元素，例如输入元素等。