javascript - litelement - 处理点击离开事件

Question

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

我想向我的自定义元素添加一个可以用作“状态”的属性。然后通过connectedCallback生命周期方法向文档添加事件监听器。但是，我似乎无法真正按照我的预期访问该特性。该属性可通过附加了事件的任何其他元素访问。

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

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

这个例子出了什么问题？

Answer 1

您的代码笔中发生的情况是，当您将成员函数作为参数发送给将存储它并稍后使用它的东西时(事件监听器会将函数存储在内部变量中，并在事件发生时调用它)在 JS 中，此成员函数“释放”了 this 属性。它没有链接到 lit-element 而是链接到 js 本身，并且可以在多种情况下发生，但是 lit-element 创建了许多可以变得相关的情况。

您可以使用

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

而不是

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

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