JavaScript 捕获 onfocus 事件

Question

我有一些输入和一个按钮。我想实现允许删除最近聚焦/聚焦的输入之一的功能。

我设置了 onfocusout 函数，该函数在按钮上设置点击监听器。如果我专注于第一个输入，然后将注意力从它移开并单击按钮 - 工作正常。但是，当我专注于第一个输入，然后是第二个输入并单击按钮时 - 我会执行 n 次 deleteCell() 函数。

如何让它只记住上次的 onfocusout 事件？它似乎在单击按钮之前计算我的 onfocusout 事件。

谢谢。

var input = document.createElement("input");
input.setAttribute("onfocusout", "myFunction()");

function myFunction() {
    document.getElementById("delete-cell").addEventListener("click", function () {
        deleteCell();
    });
}

function deleteCell() {
    alert(1);
}

Answer 1

尝试向相关元素类添加一个 on-focusout 监听器，然后为元素 focusedout 添加一个“to-delete”类(使用“this”属性)。但是只有在您首先从所有元素中删除它之后才添加这个“to-delete”类。这应该让您拨入与最近的 focusout 事件相关的元素。

 $(".element-class").on("focusout", function() {
     $(".element-class").removeClass("to-delete");
     $(this).addClass("to-delete");
 })

然后只需编写一个函数，该函数将删除具有“to-delete”类的元素，由点击事件触发。

这是 fiddle :https://jsfiddle.net/gbrodzik/ej4czqrc/6/