移动端如何监听select元素的展开/关闭事件？

确实，原生<select>在移动端的事件表现和桌面端差异很大——系统会接管下拉面板的交互逻辑，导致常规的鼠标/点击事件完全失效。结合你的问题，我整理了几个经过验证的可行方案：

方案1：使用Pointer Events实现跨设备兼容 #

Pointer Events是W3C标准的跨设备事件模型，能同时处理鼠标、触摸和笔输入，比传统的mouse/touch事件更适配移动端场景。我们可以通过状态跟踪来区分展开和关闭动作：

const select = document.getElementById("select");
let isSelectOpen = false;

// 监听展开动作
select.addEventListener('pointerdown', (e) => {
  // 阻止默认行为避免事件顺序混乱
  e.preventDefault();
  if (!isSelectOpen) {
    console.log('Select 已展开');
    isSelectOpen = true;
  }
});

// 监听全局触摸/点击结束，判断是否关闭
document.addEventListener('pointerup', (e) => {
  if (isSelectOpen) {
    // 若点击的不是select本身，判定为空白处关闭
    if (e.target !== select) {
      console.log('Select 已关闭（点击空白）');
      isSelectOpen = false;
    }
  }
});

// 处理选择选项后的关闭动作
select.addEventListener('change', () => {
  if (isSelectOpen) {
    console.log('Select 已关闭（选择选项）');
    isSelectOpen = false;
  }
});

原理说明： #

• pointerdown在触摸/点击开始时触发，此时我们标记select为展开状态；
• 当用户点击空白区域，pointerup触发且目标不是select，此时标记为关闭；
• 当用户选择选项时，change事件会触发，同时标记为关闭。

方案2：利用focus + 全局触摸事件的组合（备选） #

如果Pointer Events在某些老旧设备上存在兼容问题，可以尝试这个方案：

const select = document.getElementById("select");
let isSelectOpen = false;

select.addEventListener('focus', () => {
  if (!isSelectOpen) {
    console.log('Select 已展开');
    isSelectOpen = true;
  }
});

document.addEventListener('touchend', () => {
  setTimeout(() => {
    // 延时检查select是否仍处于聚焦状态（部分设备关闭下拉后会保持聚焦）
    if (isSelectOpen && document.activeElement !== select) {
      console.log('Select 已关闭');
      isSelectOpen = false;
    }
  }, 100); // 短延时确保系统事件完成
});

select.addEventListener('change', () => {
  if (isSelectOpen) {
    console.log('Select 已关闭（选择选项）');
    isSelectOpen = false;
  }
});

注意点： #

• 部分移动端浏览器在关闭select下拉面板后，select仍会保持聚焦状态，所以需要结合document.activeElement判断；
• 加入100ms延时是为了等待系统原生事件处理完成，避免状态判断出错。

为什么你之前的方案失效？ #

• 移动端的mouse事件是触摸事件的模拟，系统原生select会拦截事件流，导致mousedown和mouseup几乎同时触发；
• 当关闭下拉面板时，系统不会触发blur、mouseleave等常规DOM事件，因为下拉面板不属于页面DOM树的一部分。

另外你尝试的覆盖层方案之所以无效，是因为原生select的下拉面板是系统级控件，渲染在WebView的上层，DOM中的覆盖层无法捕获到它的点击事件。

内容的提问来源于stack exchange，提问作者Alex