【移动端网页特效】01-触屏事件和常用对象列表

移动端网页特效

1.触屏事件

1.触屏事件

1.1 touch触摸事件

常见touch事件

在这里插入图片描述

使用方法示例：

在这里插入图片描述

1.2 触摸事件对象（TouchEvent）

TouchEvent是一类描述手指在触摸平面(触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等
touchstart，touchmove，touchend三个事件都会各自有事件对象。
触摸事件对象重点有三个常见对象列表：

在这里插入图片描述

白话解释：

touchues：一个 TouchList 对象，包含了所有当前接触触摸平面触点的 Touch 对象;有一个手指触摸屏幕，里面的length就是1，两个手指触摸就是2

targetTouches:一个 TouchList 对象;触摸当前dom对象的触点（触摸某一块的手指数量），而不是触摸屏幕的数量

重点：

因为平时我们都是给元素注册触摸事件，所以重点记住targetTocuhes

用法示例：

 <div class="box">div>
    <script>
        var box = document.querySelector('.box')
        box.addEventListener('touchstart', function(e){
            //我们一般都是触摸元素，所以经常使用targetTouches
            console.log(e.targetTouches[0]); 
            //targetTouches[0]，就可以得到正在触摸dom元素的第一个手指相关信息（比如坐标）
        })
    script>
1
2
3
4
5
6
7
8
9

触摸（点击）后打印台结果：

在这里插入图片描述

1.3 移动端拖动元素

实现思路：

在这里插入图片描述
HTML代码：

<style>
        .box{
            position: absolute;
            top: 0;
            left: 0;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    style>
head>
<body>
    <div class="box">div>
    <script>
        var box = document.querySelector('.box')
        var X = 0;//获得盒子原来的位置
        var Y = 0;
        box.addEventListener('touchstart', function(e){
            //获得手指的初始坐标
          startX = e.targetTouches[0].pageX;
          startY = e.targetTouches[0].pageY;
          X = this.offsetLeft;
          Y = this.offsetTop;
        })
        
        box.addEventListener('touchmove', function(e){
        //计算移动的距离
            var moveX = e.targetTouches[0].pageX -startX;
            var moveY = e.targetTouches[0].pageY -startY;
            this.style.left = X + moveX + 'px';
            this.style.top =Y + moveY + 'px';
            e.preventDefault();
        })
    script>
body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

相关阅读:
电脑重装系统 Win11 如何打开DirectX诊断工具
计算机的存储器（1）
【Linux】socket网络编程
WPF工控组态软件之冷却塔和空气压缩机开发
vue3中使用echarts：legend点击事件问题、tooltip的trigger为axis tooltio不显示问题
Word控件Spire.Doc 【图像形状】教程(7)：如何使用 C# 在 Word 中替换图像
出纳商铺如何实施数字员工提高投资回报率
Kubernetes(k8s) Web-UI界面(二)：部署和访问Kuboard
wustctf2020_name_your_cat
SQL语句

原文地址：https://blog.csdn.net/SevgiliD/article/details/126210180