javascript - event.target 元素丢失父节点信息

Question

我试图在 event.target 元素上使用 javascript 的 closest 函数，但似乎 event.target 失去了它来自 DOM 的父信息？

FWIW - 我正在检测元素主体外部的点击以确定是否关闭该元素。

const hideOnClickOutside = (tag, selector) => {
    const isVisible = (element) => {
        return element.offsetWidth > 0 || element.offsetHeight > 0;
    }

    const outsideClickListener = (e) => {
        // HERE!!
        if (!e.target.closest(selector) && e.target.nodeName != 'BUTTON') {
            const element = document.querySelector(selector);
            if (isVisible(element)) {
                tag.update({visible: false});
                document.removeEventListener('click', outsideClickListener);
            }
        }
    }

    document.addEventListener('click', outsideClickListener);
}

编辑:

我似乎之前触发的事件更新了 DOM，因此原始元素 e.target 不再存在。所以我想问题变成了，如何将 e.target 关联到取代它的新 DOM 元素？使用 Riotjs 嵌套组件附加多个点击事件。

编辑 2:

因此，如果您查看屏幕截图，td 元素与 e.target 元素具有不同的类，建议使用 td 元素实际上已被替换。

我可以在 https://jsfiddle.net/dainovu3/xuLweLuj/ 中验证此行为有一个非常人为的例子，它会模仿在 riot.js 中触发 DOM 的重新渲染，无论其他框架是什么。

所以...我想在传播链上访问 e.target 的父元素。

Answer 1

第二个监听器的 event.target 仍然是原始节点，而不是克隆节点，并且在监听器运行时它已经从 DOM 中删除并且不再有父节点。

这是更新的 fiddle .如果您想使用克隆，则必须在监听器中查询 DOM。