javascript - 如何通过单击元素外部来关闭元素？

Question

我当前正在尝试在其样式与“display = none”不同时关闭该元素。 我在控制台中遇到错误，告诉我该列表。 some 不是函数，所以我可能不太理解“some”方法。

有关我想要的内容的更多信息: 鉴于我有 3 个列表(在列表中)，当我单击它或其元素之外时，我想关闭所有列表)

提前致谢

const lists = document.querySelectorAll(".list");

function closeList() {
    document.addEventListener("click", () => {
        if(lists.some((list) => list.style.display != "none")) {
            return lists.style.display = none;
        } else return;
    });
};

Answer 1

您可以使用Node.contains()检查是否 Event.target是元素的后代，如果不是，则运行回调:

function onClickOutside(ele, cb) {
  document.addEventListener('click', event => {
    if (!ele.contains(event.target)) cb();
  });
};

// Using
onClickOutside('#list', () => console.log('Hi!'));
// Will log 'Hi!' whenever the user clicks outside of #list