53

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

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

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

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

那么,如果父 div 的任何一个子元素获得焦点,有没有办法阻止父 div 触发 blur 事件?

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

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

我正在使用 Knockout.js 即时更新 GUI,但这不应该影响我没想到的答案。

4

3 回答 3

95

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

 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)) {
        .....
    }
}

享受 :)

于 2020-02-06T12:16:16.540 回答
54

我以前必须解决这个问题。我不确定它是否是最好的解决方案,但它是我最终使用的。

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

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

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

keydown请注意,如果您还想捕捉由键盘引起的模糊,您还必须处理(并检查 tab/shift-tab)。

于 2012-08-23T13:17:00.377 回答
27

我认为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
    }
});
于 2017-11-29T23:06:12.380 回答