为Flickity箭头按钮添加点击事件无效，遇TypeError错误求助

错误原因 #

你遇到的TypeError: Cannot read properties of null (reading 'addEventListener')，本质是代码执行时找不到目标元素——Flickity的前后箭头按钮并不是一开始就写在HTML里的，而是Flickity初始化完成后动态生成的DOM节点。你的JS代码在页面加载时就执行，此时箭头按钮还没被创建，document.querySelector自然返回null，调用addEventListener就会报错。

解决方案 #

推荐利用Flickity官方提供的ready事件钩子，等待轮播组件初始化完成后，再去获取并绑定点击事件。另外要注意：Flickity有两个箭头按钮（上一个/下一个），如果要给两个都绑定事件，需要用querySelectorAll遍历。

修改后的JavaScript代码

// 先获取轮播容器，初始化Flickity实例（如果已经通过data属性初始化，也可以用Flickity.data获取）
const carousel = document.querySelector('.carousel');
const flkty = new Flickity(carousel, {
  pageDots: false
});

// 监听Flickity的ready事件，确保箭头按钮已生成
flkty.on('ready', function() {
  // 获取所有箭头按钮
  const arrowButtons = document.querySelectorAll(".carousel .flickity-prev-next-button");
  
  // 给每个按钮绑定点击事件
  arrowButtons.forEach(btn => {
    btn.addEventListener("click", () => {
      console.log("箭头按钮被点击了");
    });
  });
});

补充：如果已通过data-flickity属性初始化

如果你的轮播是通过HTML里的data-flickity属性初始化的，可以这样获取已存在的Flickity实例：

document.addEventListener('DOMContentLoaded', function() {
  const carousel = document.querySelector('.carousel');
  // 获取已初始化的Flickity实例
  const flkty = Flickity.data(carousel);
  
  flkty.on('ready', function() {
    const arrowButtons = document.querySelectorAll(".carousel .flickity-prev-next-button");
    arrowButtons.forEach(btn => {
      btn.addEventListener('click', () => {
        console.log("箭头按钮被点击了");
      });
    });
  });
});

额外建议

如果你的需求是监听轮播切换动作，而不是单纯监听按钮点击，其实可以直接用Flickity的change事件，这比监听按钮更可靠（比如用户用键盘切换、拖拽切换时也能触发）：

flkty.on('change', function(currentIndex) {
  console.log("当前切换到第", currentIndex + 1, "个轮播项");
});

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