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

Question

我试图在closest元素上使用javascript＆＃39; event.target函数，但似乎event.target从DOM中丢失了其父信息？< / p>

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。