javascript - 如果其任何一个子级获得焦点，则防止触发模糊事件

Question

我在页面上有一个 div，显示有关特定类别(图像、名称等)的一些信息。

当我单击编辑图像时，它会将类别置于编辑模式，这样我就可以更新名称。从下图中可以看出，“Soup”当前处于编辑模式，其他处于正常查看模式。这一切都按预期工作，取消/保存按钮一切正常。 (我尝试添加图像但不让我，需要更多的爱)

但是一旦进入编辑模式，如果我单击页面上的任何其他位置(div 之外)，预期结果将是汤类别将返回查看模式。在某种事件触发时，这也应该允许我询问他们是否想要保存更改。

所以我决定做的是在“soups”父 div 上创建一个模糊事件。如果我单击页面上的任何位置，这将按预期工作，但是如果我单击 div 的内部元素，它也会导致触发父级模糊事件，从而导致类别返回到查看模式。

那么，有没有一种方法可以防止父级 div 在其任何一个子级获得焦点时触发模糊事件？

<div tabindex="-1" onblur="alert('outer')">
    <input type="text" value="Soup" />
</div>

我只是在没有编译器的情况下编写了代码，所以不确定这是否有效，但希望你明白了。

我正在使用 Knockout.js 动态更新 GUI，但这不会影响我没想到的答案。

Answer 1

我也遇到了同样的问题。这对我有用。

 handleBlur(event) {
    // if the blur was because of outside focus
    // currentTarget is the parent element, relatedTarget is the clicked element
    if (!event.currentTarget.contains(event.relatedTarget)) {
        .....
    }
}

享受吧:)