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>
}
react使用swiper,解决添加点击事件首位图片点击失效,解决轮播按钮被覆盖问题的更多相关文章
- JS: javascript 点击事件执行两次js问题 ,解决jquery绑定click事件出现点击一次执行两次问题
javascript 点击事件执行两次js问题 在JQuery中存在unbind()方法,先解绑再添加点击事件,解决方案为: $(".m-layout-setting").unbi ...
- echarts 图的点击事件(含:点击重复触发的问题及其解决方法)
今天用echarts的时候发现一个问题 鼠标指向不同地市触发一个事件展示该地区趋势图 但是但是后台中不管我第几次鼠标指向都会触发两次指向事件 现在贴出解决办法: 问题完美解决.但是为什么会调用两次, ...
- Swift 导航栏设置图片点击事件,图片蓝色的解决方案
如果导航栏想做一个点击事件,正好是一个图片 我们可以直接这样: self.navigationItem.rightBarButtonItem = UIBarButtonItem(image: UIIm ...
- pyqt的多Button的点击事件的槽函数的区分发送signal的按钮。
关键函数:QPushButton的setObjectName()/objectName() 个人注解:按功能或者区域,将按钮的点击事件绑定的不同的槽函数上. from PyQt5.QtWidgets ...
- 在CTreeCtrl控件点击事件中获取点击的项
网上搜了一下,有两种方法: 1.使用GetSelectedItem() HTREEITEM hItem = m_treeCtrl.GetSelectedItem(); CString strText ...
- javascript基础1 语法 点击事件 超链接带点击事件
javascript ----------------------------------------------------------------------------------------- ...
- 点击DIV触发其他元素的点击事件(案例:点击type="radio" 的input 标签外层DIV,触发内部单选点击选中事件)
方法一: 直接用找到对应dom元素调用.click()方法 $('.user_content').click(function(){ $(this).children()[0].click(); // ...
- 417 事件、监听、jQuery、轮播手动
am:通用事件 a链接事件阻止默认行为 return false HTML元素大都包含了自己的默认行为,例如:超链接.提交按钮等.我们可以通过在绑定事件中加上return false来阻止它的默认行为 ...
- 点击轮播图片左右button,实现轮播效果
点击左右button.实现图片轮播效果.js代码例如以下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(" ...
随机推荐
- The Battle of Chibi
The Battle of Chibi 给出一段长度为n的序列\(\{a_i\}\),求其中长度为m的严格上升子序列个数\(mod\ 10^9+7\),\(n\leq 10^3\). 解 不难想到设\ ...
- 0908CSP-S模拟测试赛后总结
我早就料到昨天会考两场2333 话说老师终于给模拟赛改名了啊. 距离NOIP祭日还有60天hhh. 以上是废话. %%%DeepinC无敌神 -rank1 zkt神.kx神.动动神 -rank2 有钱 ...
- 大数据之hadoop集群安全模式
集群安全模式1.概述(1)NameNode启动 NameNode启动时,首先将镜像文件(Fsimage)载入内存,并执行编辑日志(Edits)中的各项操作.-旦在内存中成功建立文件系统元数据的影像,则 ...
- springboot跨域问题解决
package com.qif.xdqdm.config; import org.springframework.context.annotation.Bean; import org.springf ...
- FTP Active & Passive
在主动模式下,FTP客户端随机开启一个大于1024的端口N向服务器的21号端口发起连接,然后开放N+1号端口进行监听,并向服务器发出PORT N+1命令.服务器接收到命令后,会用其本地的F ...
- 前端笔记:animate+easing用法(hexo next主题自定义动画)
个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io easing介绍 animate默认是有加速度 ...
- 阿里云CentOs7上安装GitLab
一.安装 基本上可以根据官网的教程来安装:https://www.gitlab.com.cn/installation/#centos-7 只不过我们暂时没有邮件服务器,所以postfix没有安装. ...
- POJ-2255-Tree Recovery-求后序
Little Valentine liked playing with binary trees very much. Her favorite game was constructing rando ...
- Print Article /// 斜率优化DP oj26302
题目大意: 经典题 数学分析 G(a,b)<sum[i]时 a优于b G(a,b)<G(b,c)<sum[i]时 b必不为最优 #include <bits/stdc++.h& ...
- iOS开发系列-NSOutputStream
NSOutputStream 创建一个NSOutputStream实例 - (nullable instancetype)initToFileAtPath:(NSString *)path appen ...