[Javascript] 如果其中的任何一个孩子获得焦点,请防止发生模糊事件


Answers

我不认为在所有浏览器的焦点事件之前都会发生mousedown事件,所以更好的方法是使用evt.relatedTarget 。 对于focusin事件, eventTarget属性是对当前失去焦点的元素的引用。 你可以检查这个元素是否是父类的后代,如果不是,你知道焦点是从外部进入父类的。 focusout是对focusout事件,是对当前焦点的元素的引用。 使用相同的逻辑来确定焦点是否完全离开父项:

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
    }
});
Question

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

当我点击编辑图像时,它将类别置于编辑模式,允许我更新名称。 从下图可以看出,“汤”目前处于编辑模式,其他模式处于普通视图模式。 这一切都按预期运行,取消/保存按钮正确无误。 (我试图添加一个图像,但不会让我,需要更多的爱)

然而,一旦在编辑模式下,如果我点击页面上的其他任何地方(div的外部)预期的结果将是汤类将回到查看模式。 在某种事件发生后,这也应该让我问,如果他们想保存更改。

所以我决定做的是在“汤”父母div上创建模糊事件。 如果我点击页面上的任何地方,这种方式就可以正常工作,但是如果我点击div的内部元素,也会导致父项模糊事件被触发,从而导致类别返回到查看模式。

那么,有没有一种方法可以防止父母的div如果其中的任何一个孩子获得焦点,就会发起模糊事件?

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

我只是写了代码,没有编译器,所以不知道如果这个工作,但希望你有这个想法。

我正在使用Knockout.js更新动态图形用户界面,但不应该影响这个答案,我不会想到。