页面加载时如何自动点击第一个<li>元素？

你尝试用portfolioFilters[0].click()模拟点击无效，核心原因大概率是事件绑定时机或自定义事件绑定逻辑的问题，以下是两种可行解决办法：

方案一：抽离逻辑直接调用（推荐） #

没必要模拟点击，把筛选激活的逻辑抽成独立函数，初始化时直接调用，既可靠又避免事件触发的不确定性：

window.addEventListener('load', () => {
  let portfolioContainer = select('.portfolio-container');
  if (portfolioContainer) {
    let portfolioIsotope = new Isotope(portfolioContainer, {
      itemSelector: '.portfolio-item'
    });

    let portfolioFilters = select('#portfolio-flters li', true);

    // 抽离筛选激活逻辑为独立函数
    function activateFilter(filterElement) {
      // 清除所有选项的激活状态
      portfolioFilters.forEach(el => el.classList.remove('filter-active'));
      // 标记当前选项为激活
      filterElement.classList.add('filter-active');
      // 执行Isotope筛选
      portfolioIsotope.arrange({
        filter: filterElement.getAttribute('data-filter')
      });
      // 筛选完成后刷新AOS动画
      portfolioIsotope.on('arrangeComplete', () => AOS.refresh());
    }

    // 绑定筛选点击事件
    on('click', '#portfolio-flters li', function(e) {
      e.preventDefault();
      activateFilter(this);
    }, true);

    // 页面加载时自动激活第一个筛选项
    if (portfolioFilters.length > 0) {
      activateFilter(portfolioFilters[0]);
    }
  }
});

方案二：触发原生点击事件 #

如果坚持要用模拟点击，需确保在事件绑定完成后，用dispatchEvent触发原生点击事件（部分场景下直接调用click()无法触发委托的事件）：

在事件绑定代码之后添加：

if (portfolioFilters.length > 0) {
  portfolioFilters[0].dispatchEvent(new Event('click'));
}

关键说明 #

• 直接调用click()无效，通常是因为你的自定义on函数用了事件委托，元素的click()方法不会触发委托的事件流，而dispatchEvent会触发完整的原生事件流程，确保委托事件被捕获。
• 方案一的代码结构更清晰，后续维护筛选逻辑也更方便，优先推荐使用。

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