Use a mobile-side event:
onTouchStartCapture onTouchStart
onTouchMoveCapture onTouchMove
onTouchEndCapture onTouchEnd
There are events that capture Capture event (an event is triggered from outside to inside), there is a bubbling event (an event is triggered from the inside out).
Event binding: binding events to list in this way, the mobile end user can determine the trigger is to click on the screen or swipe event:
<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> ha </ p>
</div>
<div className="nav" onTouchEndCapture={()=>this.toRouter("/index")}>
<img src={img2} alt="" />
<P> Goo </ p>
</div>
</div>
Click to distinguish between mobile terminal or slip event methods:
toRouter(url){
this.props.history.push(url)
}
old = 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 ( "stated that this is the decline events")
// }
// if(this.startY>this.endY){
// console.log ( "Description This is a slip event")
// }
if (this.endY! = 0) {// event description is slidably
e.stopPropagation (); // stop event propagation,
}
}