部分安卓Chrome设备中点击Select元素后立即关闭的问题求助

问题定位确认 #

你已经锁定是Facebook Pixel的兼容性问题导致页面隐性DOM变动或刷新，进而关闭select下拉框——常规的preventDefault()/stopPropagation()无效，核心原因是这些方法只能阻止当前事件冒泡，无法拦截Pixel触发的后续页面行为。

针对性解决思路 #

1. 精准定位Pixel的触发逻辑

• 临时注释掉Facebook Pixel的全部代码，确认问题是否消失（100%验证根源）。
• 若问题消失，检查Pixel的事件触发时机：是否在select的change/focus事件中误触发了fbq('track', 'ViewContent')这类追踪事件？这类操作可能触发页面资源请求或DOM更新，干扰select的下拉状态。

2. 给Pixel事件加交互状态拦截

通过标记select的交互状态，阻止Pixel在下拉展开期间执行相关操作：

let isSelectInteracting = false;
const selectElements = document.querySelectorAll('.single-option-selector');

// 标记交互开始
selectElements.forEach(el => {
  el.addEventListener('mousedown', () => isSelectInteracting = true);
  el.addEventListener('touchstart', () => isSelectInteracting = true);
});

// 标记交互结束（延迟执行确保选择完成）
document.addEventListener('click', () => {
  setTimeout(() => isSelectInteracting = false, 300);
});

// 修改Pixel触发逻辑，添加状态判断
function trackPixelEvent(eventName) {
  if (!isSelectInteracting) {
    fbq('track', eventName);
  }
}

3. 适配安卓Chrome的事件模型

安卓Chrome的触摸/鼠标事件逻辑和桌面端不同，尝试绑定touchstart事件并阻止冒泡（注意不要调用preventDefault()，会阻止下拉展开）：

selectElements.forEach(el => {
  el.addEventListener('touchstart', function(e) {
    e.stopPropagation();
  }, { passive: false });
});

4. 优化Pixel的加载时机

确保Pixel代码在页面完全渲染后初始化，避免干扰DOM渲染：

document.addEventListener('DOMContentLoaded', () => {
  // 在此插入Facebook Pixel初始化代码
});

若使用Shopify内置Pixel集成，进入后台「设置」→「数据共享」→「Facebook」，检查是否开启了自动追踪产品选项变更的功能，如有则暂时关闭测试。

5. 替代原生Select组件（终极方案）

若以上方法均无效，用自定义下拉组件替代原生select，完全控制显示逻辑：

<div class="custom-select-wrapper">
  <div class="custom-select-trigger">{{ option.selected_value }}</div>
  <div class="custom-select-options">
    {% for value in option.values %}
      <div class="custom-select-option" 
           data-value="{{ value | escape }}" 
           {% if option.selected_value == value %}data-selected="true"{% endif %}>
        {{ value }}
      </div>
    {% endfor %}
  </div>
</div>

配合JS控制下拉框的显示/隐藏，彻底避免原生组件被页面其他操作干扰。

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