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

【问题标题】：How to handle the event when a select drops down and not when selecting an optionHow to handle the event when a select drops down and not when selecting an option
【发布时间】：2019-09-18 13:59:39
【问题描述】：

背景：

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

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

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

我有一个标准的jQuery“点击”事件处理程序绑定到选择。

当前行为：

当用户单击选择以选择一个选项时，选择的背景颜色为白色，因此图标与背景融为一体，无法看到。

点击事件触发。

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

预期行为：

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

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

问题

这可能吗？

其他cmets

非常感谢

【问题讨论】：

标签： jquery events select click

【解决方案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')
}

【讨论】：

完美。正是我需要的。