移动端常见的事件特效

最新推荐文章于 2024-02-11 22:06:24 发布

狗焕sama

最新推荐文章于 2024-02-11 22:06:24 发布

阅读量290

点赞数 1

分类专栏：移动端

本文链接：https://blog.csdn.net/qq_42376204/article/details/104963642

版权

移动端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

在这里插入图片描述

触屏事件：

在这里插入图片描述

touchstart：手指触碰到就触发。相当于onclick
touchmove：滑动时触发，相当于mousemove
touchend：移开时触发，相当于mouseleave，但是只触发一次

在这里插入图片描述

touches：正在触摸屏幕手指的一个列表（包含手指个数及其位置等）
targetTouches：正在触摸当前DOM元素上的手指列表。
changedTouches：手指状态发生改变的列表，例如手指离开DOM，或者突然点击DOM，是一个从无到有，从有到无的过程！

如果touches和targetTouches都在DOM里面，则没用任何区别。

移动端拖动盒子案例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        div{
            position: absolute;
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>





</head>
<body>

    <div></div>



    <script>
        var div = document.querySelector("div");
        var startx = 0, starty = 0;
        var boxx = 0, boxy = 0;
        div.addEventListener('touchstart',function (e) {
            startx = e.targetTouches[0].pageX;//鼠标用page
            starty = e.targetTouches[0].pageY;

            boxx = this.offsetLeft;//盒子用offset。
            boxy = this.offsetTop;
        });

        div.addEventListener('touchmove',function (e) {
            startx = e.targetTouches[0].pageX - startx;
            starty = e.targetTouches[0].pageY - starty;


            this.style.left = boxx + startx + 'px';
            this.style.top = boxy + starty + 'px';

        });
    </script>
</body>
</html>