BOM对象——在移动端的实现

最新推荐文章于 2022-11-28 22:13:09 发布

啵啵丶

最新推荐文章于 2022-11-28 22:13:09 发布

阅读量147

点赞数 4

分类专栏： JavaScript 文章标签： html5 css html

本文链接：https://blog.csdn.net/m0_53620413/article/details/120437872

版权

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、移动端触屏事件 touch

触屏事件 touch（也称触摸事件）

touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作

常见的触屏事件如下：

touchstart : 手指触摸到一个 DOM 元素时触发

touchmove：手指在一个DOM 元素上滑动时触发

touchend：手指从一个DOM 元素上移开时触发

二、移动端触摸事件对象

TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等

触摸事件对象重点看三个常见的：

touches：正在触摸屏幕的所有手指的一个列表

targetTouches：正在触摸当前 DOM 元素上的手指的一个列表

changedTouches：手指状态发生了改变的列表，从无到有，从有到无变化

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

targetTouches[0] 就可以得到正在触摸 dom 元素的第一个手指的相关信息，比如手指的坐标等等

三、移动端拖动元素

移动端拖动的原理：手指移动中，计算出手指移动的距离。然后用盒子原来的位置 + 手指移动的距离

手指移动的距离：手指滑动中的位置减去手指刚开始触摸的位置

拖动元素三步曲：

（1）触摸元素 touchstart：获取手指初始坐标，同时获得盒子原来的位置

（2）移动手指 touchmove: 计算手指的滑动距离，并且移动盒子

（3）离开手指 touchend

注意：手指移动也会触发滚动屏幕所以这里要阻止默认的屏幕滚动 e.preventDefault()；

案例：手指移动盒子

 <style>
        * {
            padding: 0;
            margin: 0;
        }
        .box {
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="box">

    </div>
    <script>
        var box = document.querySelector('.box');
        var startX = 0;
        var startY = 0;
        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 endX = e.targetTouches[0].pageX - startX;
            var endY = e.targetTouches[0].pageY - startY;
            this.style.left = x + endX + 'px';
            this.style.top = y + endY + 'px';
            e.preventDefault();
        })
    </script>
</body>

四、classList属性

classList属性是HTML5新增的一个属性，返回元素的类名。但是 ie10以上版本支持。

该属性用于在元素中添加，移除及切换CSS类

添加类：element.classList.add('类名');
移除类：element.classList.remove('类名');
切换类：element.classList.toggle('类名');

注意：
1. 添加类名是在后面追加类名不会覆盖以前的类名注意前面不需要加 .

2.切换类当有这个类的时候就会删除，如果没有就会添加，可以用于实现开关灯案例
btn.addEventListener('click',function(){
document.body.classList.toggle('bg');
})

啵啵丶

关注

4
点赞
踩
1

收藏

觉得还不错? 一键收藏
3
评论
BOM对象——在移动端的实现

一、移动端触屏事件 touch触屏事件 touch（也称触摸事件）touch 对象代表一个触摸点。触摸点可能是一根手指，也可能是一根触摸笔。触屏事件可响应用户手指（或触控笔）对屏幕或者触控板操作常见的触屏事件如下：touchstart : 手指触摸到一个 DOM 元素时触发touchmove：手指在一个DOM 元素上滑动时触发touchend：手指从一个DOM 元素上移开时触发二、移动端触摸事件对象TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸..
复制链接

扫一扫