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

Question

背景：

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

我必须设置选择样式，以便默认下拉箭头替换为图标 - 再次直截了当的东西。我使用select的容器上的:: after伪类完成了这个。

选择的背景颜色为红色，下拉图标为白色。

我有一个绑定到select的标准jQuery“click”事件处理程序。

目前的行为：

当用户单击选择以选择一个选项时，选择的背景颜色为白色，因此图标会混合到背景中而无法看到。

触发点击事件。

选择选项后，单击事件将再次触发。

预期行为：

我想将下拉箭头的颜色更改为红色，直到用户聚焦。我打算通过向select的父级添加一个更改颜色的类来实现此目的。

我只想在用户单击选择以将其删除而不是在用户单击选项时处理该事件。

题

这可能吗 ？

其他的建议

非常感谢

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')
}