litelement - обработка события клика

Question

Я строю навигацию по сайту, используя элемент. Это будет иметь выпадающее меню. Я пытаюсь выяснить, как добавить событие, чтобы, если пользователь щелкнет где-нибудь за пределами самого раскрывающегося меню или даже за пределами пользовательского элемента, раскрывающееся меню закроется. Я думаю, что это естественное ожидание.

Я подумал о добавлении свойства к своему пользовательскому элементу, который можно использовать как «состояние». А затем добавил в документ прослушиватель событий с помощью метода connectedCallback жизненного цикла. Но, похоже, я не могу получить доступ к собственности, как я ожидал. Свойство доступно через любые другие элементы, к которым прикреплено событие.

Ниже приведен очень обобщенный c кодекс. Нажатие в любом месте документа должно открыть всплывающее окно, которое показывает, что значение свойства не определено. Однако, если я нажму на кнопку внутри пользовательского элемента, к которому прикреплено событие, этот обработчик событий сможет успешно получить доступ к свойству.

https://codepen.io/aver-mimas/pen/ExjZXMq

Что не так в этом примере?

Answer 1

То, что происходит в вашем коде ручки, заключается в том, что когда вы отправляете функцию-член в качестве параметра для чего-то, что будет сохранять ее и использовать позже (прослушиватель событий сохранит функцию во внутренней переменной и вызовет ее, когда событие в JS, эта функция-член "теряет" свойство this. Он связан не с освещенным элементом, а с самим js, и может случиться в разных случаях, но освещенный элемент создает множество случаев, когда он может стать обыденным.

Вы можете использовать

document.addEventListener('click', e=>this.handleDocumentClick())

вместо

document.addEventListener('click', this.handleDocumentClick)

Функция стрелки укажет JS связать «this» объекта, в котором она находится объявлен, а затем вызвать функцию-член с правильным контекстом.