如何用JavaScript捕获<li>和<img>点击事件？Glide.js项目问题求助

以下是我的代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="/assets/css/reset.css" />
  <link rel="stylesheet" href="/assets/css/glide.core.min.css" />
  <link rel="stylesheet" href="/assets/css/glide.theme.min.css" />
  <link rel="stylesheet" href="/assets/fontawesome-5.15.1/css/all.min.css" />
</head>

<body>
  <div class="container">
    <div class="glide">
      <div class="glide__track" data-glide-el="track">
        <ul class="glide__slides">
          <li class="glide__slide" id="asd1"><img id="asd2" src="/assets/img/1.jpg" alt="" /></li>
          <li class="glide__slide"><img src="/assets/img/2.jpg" alt="" /></li>
        </ul>
      </div>

      <div class="glide__arrows" data-glide-el="controls">
        <button class="glide__arrow glide__arrow--left" data-glide-dir="&lt;">
            <i class="fa fa-chevron-left"></i>
          </button>
        <button class="glide__arrow glide__arrow--right" data-glide-dir="&gt;">
            <i class="fa fa-chevron-right"></i>
          </button>
      </div>

      <div class="glide__bullets" data-glide-el="controls[nav]">
        <button class="glide__bullet" data-glide-dir="=0"></button>
        <button class="glide__bullet" data-glide-dir="=1"></button>
      </div>
    </div>
  </div>

  <script src="/assets/js/glide_3.5.2.min.js"></script>

  <script>
    const config = {
      type: 'carousel',
    };
    new Glide(".glide", config).mount();

    const asd1 = document.querySelector('#asd1');
    asd1.addEventListener('click', () => {
      alert('asd1');
    });
    const asd2 = document.querySelector('#asd2');
    console.log('asd', asd1, asd2);
    asd2.addEventListener('click', () => {
      alert('asd2');
    });
  </script>
</body>

</html>

原因分析 #

核心问题是Glide.js初始化时会重新渲染DOM结构：
你在Glide执行mount()后才获取<li>和<img>元素并绑定事件，但Glide在初始化过程中会对原始轮播项进行克隆、重构，导致你获取的asd1、asd2是初始化前的DOM节点，这些节点已经被替换出当前文档流，绑定的事件自然无法触发。

解决方法 #

方法1：使用事件委托（推荐） #

把点击事件绑定到不会被Glide替换的父元素上，利用事件冒泡机制捕获子元素的点击事件，不受DOM更新影响：

const config = {
  type: 'carousel',
};
new Glide(".glide", config).mount();

// 绑定事件到父元素.glide__slides
document.querySelector('.glide__slides').addEventListener('click', function(e) {
  // 找到被点击的轮播项
  const targetSlide = e.target.closest('.glide__slide');
  if (!targetSlide) return;

  // 根据轮播项的索引或自定义属性跳转对应页面
  const slideIndex = Array.from(this.children).indexOf(targetSlide);
  switch(slideIndex) {
    case 0:
      window.location.href = '/page1.html';
      break;
    case 1:
      window.location.href = '/page2.html';
      break;
    // 可扩展更多轮播项的跳转逻辑
  }
});

方法2：在Glide的mounted回调中绑定事件 #

Glide提供生命周期钩子，在mounted回调中绑定事件，确保DOM已经完成初始化：

const config = {
  type: 'carousel',
};
const glide = new Glide(".glide", config);

// 等待Glide完成挂载后再绑定事件
glide.on('mounted', function() {
  document.querySelector('#asd1').addEventListener('click', () => {
    window.location.href = '/page1.html';
  });
  document.querySelector('#asd2').addEventListener('click', () => {
    window.location.href = '/page2.html';
  });
});

glide.mount();

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