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

Question

背景：

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

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

select 的背景色为红色，下拉图标为白色。

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

当前行为：

当用户点击 select 选择一个选项时，select 的背景颜色为白色，因此图标融入背景而看不见。

点击事件触发。

当您 select 选择一个选项时，点击事件会再次触发。

预期行为：

我想将下拉箭头的颜色更改为红色，直到用户将焦点移开。我计划通过向 select 的父级添加一个 class 来改变颜色。

我只想在用户单击 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')
}

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

How to handle the event when a select drops down and not when selecting an option

jquery

events

select

click