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>
}