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();  //阻止事件传播,
            }
        }
  • 相关阅读:
    Windows Socket编程简介
    IIS7.0 Appcmd 命令详解
    VC显示网页验证码、模拟CSDN网页登录
    c++对象初始化中 ZeroMemory、memset、直接赋0的区别
    在MFC程序中显示 JPG/GIF图像
    开始学习WTL——(1)关于STL/ATL/WTL之间的区别
    可编辑子项的CListCtrl类
    VC添加自定义消息
    VC调用JavaScript函数--处理QQ网页登录密码加密(空间、农场、WEB QQ等)
    VC创建定时关闭的MessageBox
  • 原文地址:https://www.cnblogs.com/shidawang/p/11960537.html
Copyright © 2011-2022 走看看