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();  //阻止事件传播,

        }

    }