安卓移动端Chrome中FAQ折叠面板click事件绑定失效求助

以下是针对该问题的几种排查和解决方向：

1. 修复代码中的全局变量隐患 #

你的循环中未声明变量i，会造成全局变量污染，虽不一定是直接诱因，但先修正避免潜在问题：

const items = document.querySelectorAll(".accordion button");
function toggleAccordion() {
  const itemToggle = this.getAttribute('aria-expanded');
  
  // 用let声明i，限制变量作用域
  for (let i = 0; i < items.length; i++) {
    items[i].setAttribute('aria-expanded', 'false');
  }
  
  if (itemToggle === 'false') {
    this.setAttribute('aria-expanded', 'true');
  }
}

2. 改用Pointer事件替代Click/Touch事件 #

安卓Chrome对Pointer事件的支持更稳定，它统一了鼠标、触摸和笔输入逻辑，替换事件绑定为：

// 同时绑定pointerdown和click，兼顾多端兼容性
items.forEach(item => {
  item.addEventListener('pointerdown', toggleAccordion);
  item.addEventListener('click', toggleAccordion);
});

若担心重复触发，可添加简单防抖：

let isProcessing = false;
function toggleAccordion() {
  if (isProcessing) return;
  isProcessing = true;
  
  const itemToggle = this.getAttribute('aria-expanded');
  
  for (let i = 0; i < items.length; i++) {
    items[i].setAttribute('aria-expanded', 'false');
  }
  
  if (itemToggle === 'false') {
    this.setAttribute('aria-expanded', 'true');
  }
  
  setTimeout(() => {
    isProcessing = false;
  }, 100);
}

3. 排查CSS交互阻塞问题 #

• 确认按钮或其父元素未设置pointer-events: none，该属性会直接阻断所有交互事件
• 检查是否有透明元素（如绝对定位的空div、遮罩层）的z-index高于按钮，导致触摸点击被拦截
• 确保按钮可点击区域足够大（安卓Chrome建议最小48x48px），可通过CSS扩展点击范围：

.accordion button {
  min-width: 48px;
  min-height: 48px;
  position: relative;
}
/* 用伪元素扩展点击区域，不影响原有布局 */
.accordion button::before {
  content: '';
  position: absolute;
  top: -10px;
  left: -10px;
  right: -10px;
  bottom: -10px;
}

4. 处理触摸事件默认行为干扰 #

若之前尝试touch事件无效，可能是页面滚动等默认行为干扰了点击，可在touchstart事件中阻止默认行为：

items.forEach(item => {
  item.addEventListener('touchstart', (e) => {
    e.preventDefault();
    toggleAccordion.call(this);
  });
  item.addEventListener('click', toggleAccordion);
});

注意：阻止默认行为可能影响页面滚动，建议仅在按钮区域添加此处理。

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