如果模糊事件的任何一个子项获得焦点，请阻止启动模糊事件

Question

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

当我点击编辑图像时，它会将类别置于编辑模式，允许我更新名称。正如你从下面的图片中看到的，它显示"汤"目前处于编辑模式，其他的都处于正常视图模式。这一切都如预期的那样工作，取消/保存按钮做得很好。（我试着添加一张图片，但不允许，需要更多的爱）

但是在编辑模式下，如果我单击页面上的其他任何位置（div之外），预期结果将是汤类将返回到查看模式。在某种事件触发时，这也应该允许我询问他们是否希望保存更改。

因此，我决定在"汤"父div上创建一个模糊事件。如果我单击页面上的任何位置，这都可以正常工作，但如果我单击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)) {
        .....
    }
}

享受：）

Answer 2

我以前不得不解决这个问题。我不确定这是否是最好的解决方案，但这就是我最终使用的解决方案。

由于单击事件在模糊后触发，因此没有（跨浏览器、可靠的）方法来判断哪个元素正在获得焦点。

然而，Mousedown在模糊之前开火。这意味着您可以在子元素的mousedown中设置一些标志，并在父元素的模糊中查询该标志。

工作示例：http://jsfiddle.net/L5Cts/

请注意，如果您还想捕捉键盘引起的模糊，则还必须处理keydown（并检查制表符/移位制表符）。

Answer 3

我认为不能保证mousedown会在所有浏览器的焦点事件之前发生，所以处理这一问题的更好方法可能是使用evt.relatedTarget。对于focusin事件，eventTarget属性是对当前失去焦点的元素的引用。您可以检查该元素是否是父元素的后代，如果不是，则您知道焦点是从外部进入父元素的。对于focusout事件，relatedTarget是对当前正在接收焦点的元素的引用。使用相同的逻辑来确定焦点是否完全离开父对象：

const parent = document.getElementById('parent');
parent.addEventListener('focusin', e => {
    const enteringParent = !parent.contains(e.relatedTarget);
    if (enteringParent) {
        // do things in response to focus on any child of the parent or the parent itself
    }
});
parent.addEventListener('focusout', e => {
    const leavingParent = !parent.contains(e.relatedTarget);
    if (leavingParent) {
        // do things in response to fully leaving the parent element and all of its children
    }
});