单击滚动条时会触发 onblur 事件答案

【问题标题】：Onblur event fires when clicking on the scrollbar单击滚动条时会触发 onblur 事件
【发布时间】：2023-01-06 23:16:37
【问题描述】：

我在 LWC 的 HTML 中包含一个 onblur 事件：

onblur={closeDropdown}

这是 js 文件中的 closeDropdown：

closeDropdown(event) {
setTimeout( handler: () => {
this.validate()
this.toggleOpenDropDown( toggleState: false)
}, timeout: 200)
}

当用户在字段外单击时，它应该关闭下拉菜单。问题是，当您单击滚动条向下滚动列表时，它也会关闭下拉列表。 onblur 事件以某种方式将滚动条视为不是该字段的一部分。有没有办法防止这种情况发生？

【问题讨论】：

也许你可以在 blur 事件上使用 document.activeElement 之类的东西并检查当前焦点在哪里，如果它在滚动条上，则不要继续。或者将整个东西包装在某种容器中，然后 el.contains(document.activeElement);查看焦点是否仍在容器内。对不起，我不知道 LWC 更具体
@Brad 我尝试在 if else 语句中使用 document.activeElement：closeDropdown(event) { if (document.activeElement === scrollbars){} else{ setTimeout( handler: () => { this.validate() this.toggleOpenDropDown( toggleState: false) }, timeout: 200)} } 但它没有改变任何东西

【解决方案1】：

你能找到解决这个问题的方法吗？我正在处理完全相同的问题。

【讨论】：