Why does my JavaScript event listener condition not work?

Question

This event listener is executed when I click anywhere in the document, I would like it to not execute when I click on this.dropdown or when I click on this.inputField . Now it executes even when i click on these two elements.

constructor(inputField, monthInput, previousMonth, nextMonth, dates, dropdown, document) {
        this.monthInput = monthInput;
        this.previousMonth = previousMonth;
        this.nextMonth = nextMonth;
        this.dates = dates;
        this.dropdown = dropdown;
        this.inputField = inputField;
        this.document = document;

this.document.addEventListener('click', (e) => {
            if (e.target.id !== this.dropdown.id && e.target.id !== this.inputField.id) {
                this.dropdown.style.display = 'none';
            }
        });
}

Thank you for any suggestions!

Answer 1

This has solved the issue:

checkPathForId(path) {
        for (let item of path) {
            if (item === this.dropdown || item === this.inputField) {
                return true;
            }
        }
        return false;
    }

I have been targeting the wrong element, the element that I was trying to get was the parent element.

Answer 2

Capture the click event on those elements and stop the event propagation:

this.dropdown.addEventListener('click', (e) => {
  console.log('Element clicked');
  e.stopPropagation();
});

https://developer.mozilla.org/en-US/docs/Web/API/Event/stopPropagation