Javascript litelement-处理单击事件

我正在使用litelement构建站点导航。它将有一个下拉菜单。我试图弄清楚如何添加事件，这样，如果用户单击下拉菜单本身之外的任何位置，甚至自定义元素之外的任何位置，下拉菜单都将关闭。我认为这是自然的期望

我想在我的自定义元素中添加一个可以用作“状态”的属性。然后通过

connectedCallback

lifecycle方法将事件侦听器添加到文档中。但是，似乎我不能像我所期望的那样真正地访问该房产。该属性可以通过附加了事件的任何其他元素进行访问

下面是一个非常通用的代码笔。单击文档上的任何位置都会打开一个弹出窗口，显示未定义的属性值。但是，如果我单击自定义元素内部的按钮（该元素附带了一个事件），则该事件处理程序能够成功访问该属性

---

本例中出现了什么问题？

代码笔中出现的情况是，当您将成员函数作为参数发送到JS中的某个对象，该对象将存储该函数并在以后使用（事件侦听器将该函数存储在内部变量中，并在触发事件时调用该函数）时，该成员函数“松散”

此

属性。 它并没有链接到lit元素，而是在js本身上，并且可以发生在各种情况下，但是lit元素创建了许多情况，在这些情况下它可以变得相关

你可以用

document.addEventListener（'click'，e=>this.handleDocumentClick（））

而不是

document.addEventListener（'click'，this.handleDocument click）

---

arrow函数将指示JS绑定声明它的对象的“this”，然后使用正确的上下文调用成员函数。

非常感谢您的回复和解释。这就解释了这一点，而且效果很好。我也尝试了一些不同的方法。我还可以在构造函数中进行绑定，如

this.handleDocumentClick=this.handleDocumentClick.bind（this）

，并保留添加事件侦听器的原始方式。您还可以将该方法转换为带有箭头函数值的类字段：

classx{handleDocumentClick=（e）=>{…}；