移动端触摸事件

最新推荐文章于 2023-02-23 11:28:44 发布

万事胜意sy

最新推荐文章于 2023-02-23 11:28:44 发布

阅读量431

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/weixin_50736511/article/details/110530193

版权

笔记专栏收录该内容

469 篇文章 2 订阅

订阅专栏

关于touches，targetTouches，changedTouches，推荐使用targetTouches

在这里插入图片描述

关于clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY

一、clientX、clientY
点击位置距离当前body可视区域的x，y坐标

二、pageX、pageY
对于整个页面来说，包括了被卷去的body部分的长度

三、screenX、screenY
点击位置距离当前电脑屏幕的x，y坐标

四、offsetX、offsetY
相对于带有定位的父盒子的x，y坐标

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .lul{
            width: 100px; 
            height: 100px;
             background: linear-gradient(to left,red,blue);
           
        }
    </style>
</head>
<body>
    <div class='lul'>1</div>
    <div class='lul'>2</div>

    <!-- 设置渐变色颜色从右到左从红到蓝 -->
</body>
</html>
<script>
//target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。也就是触发该事件的对象

    var sx,sy,mx,my,disx,disy;
    document.addEventListener('touchstart',function(q){ //q代表这个文档，这个文档中触发该事件的节点
        sx=q.targetTouches[0].clientX;
        sy=q.targetTouches[0].clientY;
    })
    document.addEventListener('touchmove',function(q){
        mx=q.targetTouches[0].clientX;
     my=q.targetTouches[0].clientY;
     disx=mx-sx; 
     disy=my-sy;  
     q.target.style.transform='translate('+disx+'px,'+disy+'px)';
    })
     document.touchend=function(q){
 
  }
//targetTouches是指触摸对象的所有触摸对象，他需要参数来代表这个对象，还要确定第几个手指对象，targetTouches时一个数组


</script>

在这里插入图片描述

触发事件的时候不能使用on，on事件会覆盖之前的事件，只执行最后一个事件，所以这里采用addEventListener事件监听，这个可以添加多个事件而且不会被覆盖

万事胜意sy

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
移动端触摸事件

关于touches，targetTouches，changedTouches，推荐使用targetTouches关于clientX、clientY、pageX、pageY、screenX、screenY、offsetX、offsetY一、clientX、clientY点击位置距离当前body可视区域的x，y坐标二、pageX、pageY对于整个页面来说，包括了被卷去的body部分的长度三、screenX、screenY点击位置距离当前电脑屏幕的x，y坐标四、offsetX、offsetY
复制链接

扫一扫