javascript - How to close an element by clicking outside of it? - Stack Overflow

admin管理员组

文章数量:1287960

I'm currently trying to close an element when its style is different than "display = none". I'm having an error in the console telling me that lists. some aren't a function so I may not have understood well the "some" method.

More Infos on what I want : Given that I have 3 lists (in lists), when I click outside of it or its elements I want to close all the lists)

Thanks in advance

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

I'm currently trying to close an element when its style is different than "display = none". I'm having an error in the console telling me that lists. some aren't a function so I may not have understood well the "some" method.

More Infos on what I want : Given that I have 3 lists (in lists), when I click outside of it or its elements I want to close all the lists)

Thanks in advance

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

• javascript

Share Improve this question Follow edited Jun 20, 2022 at 20:15 Raju Ahmed 1,26855 gold badges1515 silver badges2424 bronze badges asked Jun 20, 2022 at 8:17 user18845463user18845463 2

• Please share your Html code so. – Raju Ahmed Commented Jun 20, 2022 at 8:22
• you should run the click event outside the function. And find out if the click is on or inside your .list element, else close all lists. – Medda86 Commented Jun 20, 2022 at 8:23

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

You can use Node.contains() to check if Event.target is a descendant of element and run callback if not:

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

I suggest for you this method :

          @HostListener('document:click', ['$event.target'])
  public onClick(targetElement) {
    const event = this.elementRef.nativeElement.contains(targetElement);
    if (targetElement && !event) {
      if (this.isClickedOutside) {
        // this.shownInfo = false;
}
}

or you can also just a javascript :

    window.addEventListener('click', function(e){   
  if (document.getElementById('clickbox').contains(e.target)){
    // Clicked in box
  } else{
    // Clicked outside the box
  }
});

Js querySelectorAll() will return a nodeList, but nodeList doesn't have method some(). You can use forEach() the following:

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

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

本文标签： javascriptHow to close an element by clicking outside of itStack Overflow