zoukankan      html  css  js  c++  java
  • 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();  //阻止事件传播,
            }
        }
  • 相关阅读:
    SQL Server-基础-经典SQL语句
    Web Service简介
    大学学习与班级社团管理经验总结
    arduino超声波开发模块
    CSS中关于居中的几种设置方法
    Software testing lab3
    jQuery表格排序问题
    Jquery中的data()方法、att()、prop()方法的区分
    WEB开发自己收集的资源
    Jquery插件封装---奇怪的代码
  • 原文地址:https://www.cnblogs.com/shidawang/p/11960537.html
Copyright © 2011-2022 走看看