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

Question

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

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

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

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

这个例子出了什么问题？

标签： javascriptlit-element

Answer 1

在您的代码笔中发生的事情是，当您将成员函数作为参数发送给将存储它并稍后使用它的东西时（事件侦听器将函数存储在内部变量中，并在事件触发时调用它） JS，这个成员函数“松散”了这个this属性。它与 lit-element 无关，而是在 js 本身上，并且可以在多种情况下发生，但是 lit-element 会创建许多可以变得相关的情况。

您可以使用

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

代替

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

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