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

        }

    }