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

时间:2022-07-22 21:22:32
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>
}