HTML弹窗筛选实现技巧全解析

点击确定后怎么把条件传给列表接口

筛选弹窗本身不负责请求数据，它只负责收集和格式化参数。常见错误是直接在弹窗里写 fetch()，导致逻辑耦合、难以复用、测试困难。

更合理的方式是让弹窗只暴露一个方法，比如 getFilters()，返回干净的对象：

function getFilters() {
  const form = this.querySelector('form');
  const data = new FormData(form);
  const obj = {};
  for (let [key, value] of data.entries()) {
    if (obj[key]) {
      if (!Array.isArray(obj[key])) obj[key] = [obj[key]];
      obj[key].push(value);
    } else {
      obj[key] = value;
    }
  }
  return obj;
}

调用方拿到对象后自行决定怎么用：拼 query string、塞进 body、传给 React 的 useEffect 等——分离关注点才是关键。

移动端点透和键盘焦点容易被忽略

在 iOS Safari 或部分安卓 WebView 中，弹窗打开后点空白处关闭，再快速点列表项，可能触发底层按钮 —— 这是点透（click-through），根源是弹窗未真正阻断事件流。除了用