react使用swiper,解决添加点击事件首位图片点击失效，解决轮播按钮被覆盖问题

JS部分

 createSwiper1() {
     var option = {
         // slidesPerView: 5,
         slidesPerView: 3,
         centeredSlides:true,
     };
     if (this.state.newData.length > 2) {
         option = {
             loop: true,
             loopedSlides: this.state.newData.length,
             loopAdditionalSlides: 3,
             slidesPerView: 'auto',
             // slidesPerView: '3',
             centeredSlides:true,
             effect:'coverflow',
             paginationClickable: true,
             preventLinksPropagation: true,
             observer: true,//修改swiper自己或子元素时，自动初始化swiper
             observeParents: true,//修改swiper的父元素时，自动初始化swiper
             coverflow:{
                 rotate: 0,
                 stretch: 85,
                 depth: 52,
                 modifier: 1,
                 slideShadows: true
             },

             nextButton: '.swiper-button-next',
             prevButton: '.swiper-button-prev',
             onTouchEnd: (swiper) => {
                 window.slideSwitchMp3();
             }
         }
     }
     var  mySwiper = new Swiper('#'+ (this.props.place +'NewSwiperId'),option);

     mySwiper.on('tap',(swiper,e) => {
         var that=this;
         let item = this.state.newData[swiper.realIndex];
         var buttonId=document.getElementById(this.props.place +'buttonId')
         var buttonPrev=document.getElementById(this.props.place +'button-prev')
         var buttonNext=document.getElementById(this.props.place +'button-next')
     if(that.isDOMContains(buttonPrev,e.target,buttonId) ||that.isDOMContains2(buttonNext,e.target,buttonId)){
             return false;
     }else {
         if (item) {
             this.setState({newDetailShow: true, selectNewItem: item, eyeNum: 0, newDetailData: []}, () => {
                 if (item.infotype == 2) {
                     this.createPdf(item.pdfurl);
                 }
                 else {
                     this.fetchNewDetail();
                 }
                 this.props.parentCallback && this.props.parentCallback();
             });
             window.clickSoundEffect();
         }
     }
     });
 },

解决轮播按钮被覆盖

 isDOMContains:function(parentEle,ele,container){

     //判断一个节点是否是其子节点
     //parentEle: 要判断节点的父级节点
     //ele:要判断的子节点
     //container : 二者的父级节点

     //如果parentEle h和ele传的值一样，那么两个节点相同
     if(parentEle == ele){
         return true
     }
     if(!ele || !ele.nodeType || ele.nodeType != 1){
         return false;
     }
     //如果浏览器支持contains
     if(parentEle.contains){
         return parentEle.contains(ele)
     }

     //火狐支持
     // if(parentEle.compareDocumentPosition){
     //     return !!(parentEle.compareDocumentPosition(ele)&16);
     // }

     //获取ele的父节点
     // var parEle = ele.parentNode;
     // while(parEle && parEle != container){
     //     if(parEle == parentEle){
     //         return true;
     //     }
     //     parEle = parEle.parentNode;
     // }
     return false;
 },

 isDOMContains2:function(parentEle,ele,container){
     console.log("parentEle",parentEle)
     console.log("container",container)
     //判断一个节点是否是其子节点
     //parentEle: 要判断节点的父级节点
     //ele:要判断的子节点
     //container : 二者的父级节点

     //如果parentEle h和ele传的值一样，那么两个节点相同
     if(parentEle == ele){
         return true
     }
     if(!ele || !ele.nodeType || ele.nodeType != 1){
         return false;
     }
     //如果浏览器支持contains
     if(parentEle.contains){
         return parentEle.contains(ele)
     }

     //火狐支持
     // if(parentEle.compareDocumentPosition){
     //     return !!(parentEle.compareDocumentPosition(ele)&16);
     // }

     //获取ele的父节点
     // var parEle = ele.parentNode;
     // while(parEle && parEle != container){
     //     if(parEle == parentEle){
     //         return true;
     //     }
     //     parEle = parEle.parentNode;
     // }
     return false;
 },

render部分

 {
     !this.state.newDetailShow &&
     <div className="new-list" ref="newListId">
     <div className="swiper-container " id={ this.props.place +'NewSwiperId'} style={{transform: this.props.place == 'top' ? 'rotateZ(180deg)': 'rotateZ(0deg)'}}>

     <div className="swiper-wrapper">
 {
     this.state.newData && this.state.newData.map((item,index) => {
     return (
     <div className="swiper-slide" key={index}  data-i={index}>
     <img src={item['titlepic'].toLowerCase().indexOf("http") !== 0 ? "http://" + item['titlepic'] : item['titlepic']}    style={{transform: this.props.place == 'top' ? 'rotateZ(180deg)': 'rotateZ(0deg)'}} />
     <div className="swiper-mask"></div>
     </div>
     )
 })
 }
 {/*onClick={this.newslistclick.bind(item,index)}*/}

     </div>
     <div className="container" id={ this.props.place +'buttonId'} >
          <div className="swiper-button-next"  id={ this.props.place +'button-next'} ></div>
          <div className="swiper-button-prev"  id={ this.props.place +'button-prev'}></div>
     </div>
     </div>

     </div>
 }