web前端 在react中使用移动端事件,学习笔记
一 移动端事件的使用:
onTouchStartCapture onTouchStart
onTouchMoveCapture onTouchMove
onTouchEndCapture onTouchEnd
有Capture的事件是捕获事件(事件由外向内被触发),没有的是冒泡事件(事件由内向外被触发).
事件绑定:通过这种方式给列表绑定事件,在移动端就可以判断用户触发的是点击屏幕还是滑动屏幕事件:
<div className="footer-nav"
onTouchStartCapture={(e)=>{this.start(e)}}
onTouchMoveCapture={(e)=>{this.move(e)}}
onTouchEndCapture={(e)=>this.end(e)}
>
<div className="nav" onTouchEndCapture={()=>this.toRouter("/index")}>
<img src={img1} alt="" />
<p>哈哈</p>
</div>
<div className="nav" onTouchEndCapture={()=>this.toRouter("/index")}>
<img src={img2} alt="" />
<p>咕咕</p>
</div>
</div>
移动端区分点击还是滑动事件的方法:
toRouter(url){
this.props.history.push(url)
}
starY=0;
endY=0;
start(e){
// this.startY=e.touches[0].clientY;
this.endY=0;
}
move(e){
this.endY=e.touches[0].clientY;
}
end(e){
// console.log(this.startY,this.endY)
// if(this.endY>this.startY){
// console.log("说明这是下滑事件")
// }
// if(this.startY>this.endY){
// console.log("说明这是上滑事件")
// }
if(this.endY!=0){ //说明是滑动事件
e.stopPropagation(); //阻止事件传播,
}
}