現象

在使用 swiper 這個庫的時候，一旦設定 loop:true 的時候，有時會遇到 dom 繫結事件無法觸發的問題。

原因

當loop模式下slides前後會clone若干個slide，從而形成一個環路，但是卻不會複製繫結在dom上的click事件。

解決

不要將click事件繫結在dom上，而是在new Swiper()中的on回撥函式中統一呼叫。

梨子

 let _this = this;    // 注意 new Swiper中的this指向的是swiper物件，因此要現在外面聲明當前元件的this

 new Swiper('.gameList-swiper-container', {

            loop: true,   // 引發問題的根源

            autoplay:{   disableOnInteraction: false  },

            on:{

                click(e){

                     if(!e.target.id) return;   // e.target.id 主要起傳參的作用

                     // console.log(e.target.id)

                     _this.props.changeGameData(e.target.id);

                }

            },

            slidesPerView: 4,

            spaceBetween: 20,

 });

<div className="swiper-container gameList-swiper-container">

              <div className="swiper-wrapper">

                            {gameList.map((item,index)=>(

                                <div key={index} className="swiper-slide clearfix">

                                        <h2>{item.gameTitle}</h2>

                                        <div className='slideItemBtn' id={[item.gameClass,item.type,item.gameId]}>進入遊戲</div>

                                </div>

                            ))}

                </div>

  </div>