如何在选择下拉时处理事件，而不是在选择选项时处理事件

Question

背景：

我有一个选择元素，里面有一些选项，标准的东西。

我必须设置选择的样式，以便将默认下拉箭头替换为图标 - 再次简单明了的东西。我已经在选择的容器上使用 ：：after 伪类完成了此操作。

所选内容的背景颜色为红色，下拉图标为白色。

我有一个绑定到选择的标准jQuery"click"事件处理程序。

当前行为：

当用户单击选择以选择一个选项时，所选内容的背景颜色为白色，因此图标会混合到背景中并且看不到。

单击事件将触发。

选择某个选项时，将再次触发点击事件。

预期行为：

我想将下拉箭头的颜色更改为红色，直到用户将注意力移开。我计划通过向选择的父级添加一个更改颜色的类来做到这一点。

我只想在用户单击选择以将其下拉时处理事件，而不是在用户单击选项时处理事件。

问题

这可能吗？

其他评论

非常感谢

Answer 1

您可以使用焦点和模糊事件来

let select = document.querySelector('select')
select.addEventListener('focus', (event) => {
select.parentElement.classList.add('color-red');
}
select.addEventListener('blur', ()=>{
if(select.parentElement.classList.contains('color-red'){
select.parentElement.classList.remove('color-red')
}