移动端事件

最新推荐文章于 2024-04-23 11:37:57 发布
最新推荐文章于 2024-04-23 11:37:57 发布
阅读量415 收藏
点赞数
分类专栏： 移动端 文章标签： ios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bubbleJessica/article/details/129345701
版权

Touch事件

只能在移动端触发

Touch事件的event对象

event对象的常用属性

  1. type 事件类型
  2. target目标元素
  3. touches 屏幕上的所有触摸点
  4. targetTouches 目标上所有触摸点
  5. changedTouches 事件触发时，状态发生了改变的所有触摸点

触摸点的常用属性

触摸点：const touch=evt.changedTouches[0]

  1. identifier 触摸点id（唯一标识符）,一般多指触摸有用
  2. target 目标元素
  3. screenX/screenY 触点相对于屏幕左边缘的X、Y坐标 
  4. clientX/clientY 触点相对于可视区域左边缘的X、Y坐标。不包括任何滚动偏移
  5. pageX/pageY 触点相对于 HTML 文档左边缘的X、Y坐标。包括滚动偏移

阻止浏览器的默认行为

  1. 可以在 touch 的事件处理函数中使用 evt.preventDefault() 阻止浏览器的默认行为
  2. touch-action 告诉浏览器哪些触摸操作让浏览器处理，阻止其他触摸操作的默认行为(css样式)
  3. touch-action: pan-y允许垂直平移/ manipulation只允许进行滚动和持续缩放操作，不允许双击缩放

单指拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单指拖拽</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body style="height: 2000px;">
    <div class="box" id="box"></div>
    <script>
        const drag=$el=>{
            // 每次拖拽最开始的触摸点
            const startPoint={};
            // 拖拽过程中移动到的点
            const movePoint={};
            // 被拖拽元素的当前位置
            const curPos={
                x:0,
                y:0
            };

            $el.addEventListener('touchstart',startHandler,false);
            $el.addEventListener('touchmove',moveHandler,false);
            $el.addEventListener('touchend',endHandler,false);
            $el.addEventListener('touchcancel',cancelHandler,false);
            function startHandler(evt){
                
                const touch=evt.changedTouches[0];
                startPoint.x=touch.pageX;
                startPoint.y=touch.pageY;

            }
            function endHandler(){
                curPos.x=movePoint.x;
                curPos.y=movePoint.y;
            }
            function moveHandler(evt){
                evt.preventDefault();
                const touch=evt.changedTouches[0];
                movePoint.x=curPos.x+touch.pageX-startPoint.x;
                movePoint.y=curPos.y+touch.pageY-startPoint.y;
                $el.style.transform=`translate3d(${movePoint.x}px,${movePoint.y}px,0)`;
            }
        };
        drag(document.getElementById('box'));
    </script>
</body>
</html>

Pointer事件

pc端类似于mouse事件移动端类似于touch事件

触摸点移出目标元素，touchmove事件依然会持续触发，pointermove和mousemove事件不会再触发

Pointer事件的event对象

event对象的常用属性

  1. pointerId 指针id（唯一标识符）
  2. type 事件类型
  3. pointerType 指针类型（鼠标/笔/触摸等）
  4. target 目标元素
  5. screenX/screenY 指针相对于屏幕左边缘的X、Y坐标 
  6. clientX/clientY 指针相对于可视区域左边缘的X、Y坐标。不包括任何滚动偏移
  7. pageX/pageY 指针相对于 HTML 文档左边缘的X、Y坐标。包括滚动偏移

阻止浏览器的默认行为

  1. Pointer 的事件处理函数中，evt.preventDefault() 阻止的是 PC 端的默认行为（不能阻止 scrolling, pinch/zoom, 鼠标事件等默认行为，可以阻止图片拖动的默认行为）
  2. 可以在 touch 的事件处理函数中使用 evt.preventDefault() 阻止移动端的默认行为
  3. touch-action 设置触摸操作时浏览器的默认行为

单指拖拽 


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>单指拖拽</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <div id="box" class="box"></div>

    <script>
      // 1.touch 拖拽
      // const drag = $el => {
      //   // 每次拖拽最开始的触摸点
      //   const startPoint = {};
      //   // 拖拽过程中移动到的点
      //   const movePoint = {};
      //   // 被拖拽元素的当前位置
      //   const curPos = {
      //     x: 0,
      //     y: 0
      //   };

      //   $el.addEventListener('touchstart', startHandler, false);
      //   $el.addEventListener('touchmove', moveHandler, false);
      //   $el.addEventListener('touchend', endHandler, false);
      //   $el.addEventListener('touchcancel', endHandler, false);

      //   function startHandler(evt) {
      //     const touch = evt.changedTouches[0];

      //     startPoint.x = touch.pageX;
      //     startPoint.y = touch.pageY;
      //   }
      //   function moveHandler(evt) {
      //     evt.preventDefault();

      //     const touch = evt.changedTouches[0];

      //     movePoint.x = curPos.x + touch.pageX - startPoint.x;
      //     movePoint.y = curPos.y + touch.pageY - startPoint.y;

      //     $el.style.transform = `translate3d(${movePoint.x}px, ${movePoint.y}px, 0)`;
      //   }
      //   function endHandler() {
      //     curPos.x = movePoint.x;
      //     curPos.y = movePoint.y;
      //   }
      // };

      // 2.仿照 touch 的 Pointer 拖拽（有问题）
      // const drag = $el => {
      //   // 每次拖拽最开始的触摸点
      //   const startPoint = {};
      //   // 拖拽过程中移动到的点
      //   const movePoint = {};
      //   // 被拖拽元素的当前位置
      //   const curPos = {
      //     x: 0,
      //     y: 0
      //   };

      //   $el.addEventListener('pointerdown', startHandler, false);
      //   $el.addEventListener('pointermove', moveHandler, false);
      //   $el.addEventListener('pointerup', endHandler, false);
      //   $el.addEventListener('pointercancel', endHandler, false);
      //   $el.addEventListener(
      //     'touchstart',
      //     evt => {
      //       evt.preventDefault();
      //     },
      //     false
      //   );

      //   function startHandler(evt) {
      //     startPoint.x = evt.pageX;
      //     startPoint.y = evt.pageY;
      //   }
      //   function moveHandler(evt) {
      //     evt.preventDefault();

      //     movePoint.x = curPos.x + evt.pageX - startPoint.x;
      //     movePoint.y = curPos.y + evt.pageY - startPoint.y;

      //     $el.style.transform = `translate3d(${movePoint.x}px, ${movePoint.y}px, 0)`;
      //   }
      //   function endHandler() {
      //     curPos.x = movePoint.x;
      //     curPos.y = movePoint.y;
      //   }
      // };

      // 3.使用技巧后的 Pointer 拖拽
      const drag = $el => {
        // 每次拖拽最开始的触摸点
        const startPoint = {};
        // 拖拽过程中移动到的点
        const movePoint = {};
        // 被拖拽元素的当前位置
        const curPos = {
          x: 0,
          y: 0
        };

        $el.addEventListener('pointerdown', startHandler, false);
        // $el.addEventListener('pointermove', moveHandler, false);
        // $el.addEventListener('pointerup', endHandler, false);
        // $el.addEventListener('pointercancel', endHandler, false);
        $el.addEventListener(
          'touchstart',
          evt => {
            evt.preventDefault();
          },
          false
        );

        function startHandler(evt) {
          startPoint.x = evt.pageX;
          startPoint.y = evt.pageY;

          document.addEventListener('pointermove', moveHandler, false);
          document.addEventListener('pointerup', endHandler, false);
          document.addEventListener('pointercancel', endHandler, false);
        }
        function moveHandler(evt) {
          evt.preventDefault();

          movePoint.x = curPos.x + evt.pageX - startPoint.x;
          movePoint.y = curPos.y + evt.pageY - startPoint.y;

          $el.style.transform = `translate3d(${movePoint.x}px, ${movePoint.y}px, 0)`;
        }
        function endHandler() {
          curPos.x = movePoint.x;
          curPos.y = movePoint.y;

          document.removeEventListener('pointermove', moveHandler, false);
          document.removeEventListener('pointerup', endHandler, false);
          document.removeEventListener('pointercancel', endHandler, false);
        }
      };

      drag(document.getElementById('box'));
    </script>
  </body>
</html>

手势模拟 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手势模拟</title>
    <style>
        img{
            width: 100%;
        }

        .box{
            margin: 100px auto;
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>
</head>
<body>
    <!-- <img src="./gesture.png" alt="移动端手势"> -->
    <div id="box" class="box"></div>

    <script>
        // 1.滑动手势
        function swipe($el,cb){
            // 最开始的触摸点
            const start={};
            const threhold={
                time:500,//上限
                distance:100    //下限
            };

            $el.addEventListener('pointerdown',startHandler,false);
            // 阻止移动端的默认行为
            $el.addEventListener('touchstart',evt=>{
                evt.preventDefault();
            },false);

            function startHandler(evt){
                // 阻止PC端的默认行为
                evt.preventDefault();
                start.time=new Date().getTime();//按下去时间
                start.x=evt.pageX;//坐标
                start.y=evt.pageY;//坐标
                
                document.addEventListener('pointerup',endHandler,false);
                document.addEventListener('pointercancel',endHandler,false);
            }

            function endHandler(evt){
                const delta={};
                let direction='';
                delta.time=new Date().getTime()-start.time;
                delta.x=evt.pageX-start.x;
                delta.y=evt.pageY-start.y;
                if(delta.time>threhold.time||(Math.abs(delta.x)<threhold.distance&&Math.abs(delta.y)<threhold.distance)){
                    // 扫太慢或扫的距离太短，不是扫动手势
                    return;
                }else{
                    // 判断扫动方向
                    if(Math.abs(delta.x)>=Math.abs(delta.y)){
                        // 左右扫动
                        if(delta.x>0){
                            // 右扫
                            direction='right';
                        }else{
                            // 左扫
                            direction='left';
                        }
                    }else{
                        // 上下扫动
                        if(delta.y>0){
                            // 下扫
                            direction='down';
                        }else{
                            // 上扫
                            direction='up';
                        }
                    }
                    cb.call($el,direction);
                }
                document.removeEventListener('pointerup',endHandler,false);
                document.removeEventListener('pointercancel',endHandler,false);
            }
        }

        swipe(document.getElementById('box'),function(direction){
            //console.log(this);
            console.log(direction);
        })
    </script>
</body>
</html>

 

 

bubbleJessica
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
（八）移动端前端开发-移动端事件
m0_56517198的博客
02-14 662
鼠标类：click、mouseover、mouseout、mouseleave、mouseenter、mouseup、mousedown…键盘类：keydown、keyup…其他类：blur、focus、change、load…移动端事件：点击事件\双击事件、滑动事件：上滑、下滑、左滑、右滑、长按事件、摇一摇、重力感应等。。在移动端上使用click事件，会出现300ms延时问题。判断用户操作是否为双击事件，在300ms以内再一次点击了屏幕，浏览器则判断为双击操作。没有点击则为单击操作。touch事件
38.移动端常用事件
potato123232的博客
08-11 1605
PC端上的部分事件同样使用与移动端，比如点击事件。
移动端js事件、zeptojs、swiper、bootstrap、正则表达式、前端性能优化
最新发布
我的个人博客
04-23 812
移动端场景下的js事件；制作移动端特效常用的js库；介绍移动端常用开发框架Bootstrap。
移动端开发中常见的事件类型
qq_44749901的博客
04-01 445
对于使用框架（如ReactNative、Flutter等）开发的移动应用，还有更多的生命周期事件，如组件的挂载、更新、卸载等。在开发过程中，根据应用的需求和用户交互场景，选择合适的事件进行监听和处理是非常重要的。keydown、keypress、keyup：分别对应键盘按键按下、按键被按下并释放、按键释放的事件。touchcancel：当系统停止跟踪触摸时触发，通常发生在触摸被中断时，如来电或弹出通知。play、pause、ended：分别对应媒体（如音频、视频）的播放、暂停、结束事件。
H5移动端常用事件，此中大有文章
2401_84097427的博客
04-07 865
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题总结来说，面试成功=基础知识+项目经验+表达技巧+运气。
js移动端事件基础及常用事件库详解
10-19
主要为大家详细介绍了js移动端事件基础及常用事件库，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
移动端事件穿透的原理与解决方案.docx
10-26
移动端事件穿透的原理与解决方案.docx
vue移动端解决click延迟，封装tap，滑动等多个移动端事件js
04-26
移动端点击click事件会有300ms的延迟，而vue没有封装js的移动端tap事件，使用时，页面引用[removed][removed]，通过,active:0}">全部</li> fn：vueTouch调用。
移动端事件相关,布局.rar
09-16
移动端事件相关,布局.rar
移动端基础事件总结与应用
08-31
本文主要介绍了移动端基础事件总结与应用，具有一定的参考价值，下面跟着小编一起来看下吧
MouseMove鼠标移动事件的监控
09-24
鼠标移动事件的监控！
bilai.rarUE移动端事件相关,布局
04-17
bilai.rarUE移动端事件相关,布局
移动端长按事件演示
05-07
移动端长按事件演示，很好用，可以适用于移动端网页的长按触发事件！
分离MUI的原生js手势操作，支满足移动端事件开发的需求.zip
04-06
动态规划
vue移动端的左右滑动事件详解
01-19
本文实例为大家分享了vue移动端左右滑动事件，供大家参考，具体内容如下 <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title> [removed][removed] <...
移动端手势事件（多指操作）
weixin_40636396的博客
02-21 424
在移动端开发中，现有的手势事件只有IOS上的浏览器支持，因此对其他设备上的浏览器手势事件我们必须在移动端的touchstart、toucmove、touchend事件上进行改造升级，下面就介绍下升级改造的移动端的手势事件。 移动端触摸事件(基础事件) touchstart— 触摸开始 touchmove— 触摸移动 touchend— 触摸结束 touchcancel— 触摸中断(在触...
移动端双指事件
05-27
移动端双指事件通常是用于实现缩放或者旋转操作的，常见的事件有touchstart、touchmove、touchend等。以下是一些常用的双指事件： 1. touchstart事件 当有两个手指同时放在屏幕上时，会触发touchstart事件。此时...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值