移动端事件

最新推荐文章于 2024-08-19 19:47:14 发布

小豪boy

最新推荐文章于 2024-08-19 19:47:14 发布

阅读量1.9k

点赞数 2

分类专栏：移动Web开发前端学习笔记文章标签：自动驾驶 html html5

本文链接：https://blog.csdn.net/qq_34771938/article/details/120700870

版权

前端学习笔记同时被 2 个专栏收录

35 篇文章 1 订阅

订阅专栏

移动Web开发

7 篇文章 1 订阅

订阅专栏

一、移动端事件有哪些

触摸事件

touch事件

pointer事件

手势( gesture)事件
传感器( sensor)事件

二、touch事件

touch 相关的事件跟普通的其他 dom 事件一样使用，可以直接用 addEventListener 来监听和处理。

最基本的 touch 事件包括4个事件：

touchstart：当在屏幕上按下手指时触发
touchmove：当在屏幕上移动手指时触发
touchend：当在屏幕上抬起手指时触发
touchcancel：当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的 touch 操作，即触发 touchcancel。一般会在 touchcancel 时暂停游戏、存档等操作。

三、touch的实例属性

（1）Touch.identifier

Touch.identifier属性返回一个整数，表示触摸点的唯一 ID。这个值在整个触摸过程保持不变，直到触摸事件结束。

（2）Touch.screenX，Touch.screenY，Touch.clientX，Touch.clientY，pageX，pageY

Touch.screenX属性和Touch.screenY属性，分别表示触摸点相对于屏幕左上角的横坐标和纵坐标，与页面是否滚动无关。
Touch.clientX属性和Touch.clientY属性，分别表示触摸点相对于浏览器视口左上角的横坐标和纵坐标，与页面是否滚动无关。
Touch.pageX属性和Touch.pageY属性，分别表示触摸点相对于当前页面左上角的横坐标和纵坐标，包含了页面滚动带来的位移。

（3）Touch.radiusX，Touch.radiusY，Touch.rotationAngle

Touch.radiusX属性和Touch.radiusY属性，分别返回触摸点周围受到影响的椭圆范围的 X 轴半径和 Y 轴半径，单位为像素。乘以 2 就可以得到触摸范围的宽度和高度。
Touch.rotationAngle属性表示触摸区域的椭圆的旋转角度，单位为度数，在0到90度之间。
上面这三个属性共同定义了用户与屏幕接触的区域，对于描述手指这一类非精确的触摸，很有帮助。指尖接触屏幕，触摸范围会形成一个椭圆，这三个属性就用来描述这个椭圆区域。

（4）Touch.force

Touch.force属性返回一个0到1之间的数值，表示触摸压力。0代表没有压力，1代表硬件所能识别的最大压力。

（5）Touch.target

Touch.target属性返回一个元素节点，代表触摸发生时所在的那个元素节点。即使触摸点已经离开了这个节点，该属性依然不变。

四、touch事件的实例属性

（1）TouchEvent.altKey，TouchEvent.ctrlKey，TouchEvent.shiftKey，TouchEvent.metaKey

TouchEvent.altKey：布尔值，表示触摸时是否按下了 Alt 键。
TouchEvent.ctrlKey：布尔值，表示触摸时是否按下了 Ctrl 键。
TouchEvent.shiftKey：布尔值：表示触摸时是否按下了 Shift 键。
TouchEvent.metaKey：布尔值，表示触摸时是否按下了 Meta 键（或 Windows 键）。

（2）TouchEvent.changedTouches

TouchEvent.changedTouches属性返回一个TouchList实例，成员是一组Touch实例对象，表示本次触摸事件的相关触摸点。

对于不同的时间，该属性的含义有所不同。

touchstart事件：被激活的触摸点
touchmove事件：发生变化的触摸点
touchend事件：消失的触摸点（即不再被触碰的点）

（3）TouchEvent.touches

TouchEvent.touches属性返回一个TouchList实例，成员是所有仍然处于活动状态（即触摸中）的触摸点。一般来说，一个手指就是一个触摸点。

（4）TouchEvent.targetTouches

TouchEvent.targetTouches属性返回一个TouchList实例，成员是触摸事件的目标元素节点内部、所有仍然处于活动状态（即触摸中）的触摸点。

五、单指拖拽实例

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <title>单指拖拽</title>
    <style>
        body {
            height: 2000px;
        }
        .backtop {
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 45px;
            height: 45px;
            line-height: 45px;
            text-align: center;
            background-color: rgba(0, 0, 0, 0.6);
            border-radius: 50%;
            color: #fff;
            font-size: 30px;
            -webkit-tap-highlight-color: transparent;
            /*transform: translate3d(x, y, 0);*/
        }
    </style>
</head>
<body>
    <a href="#" id="backtop" class="backtop">&uarr;</a>

    <script>
        function drag(el, options) {
            options.x = typeof options.x !== 'undefined' ? options.x : true;
            options.y = typeof options.y !== 'undefined' ? options.y : false;

            if (!options.x && !options.y) return;

            var curPoint = {
                x: 0,
                y: 0
            };
            var startPoint = {};
            var isTouchMove = false;

            el.addEventListener('touchstart', handleStart, false);
            el.addEventListener('touchmove', handleMove, false);
            el.addEventListener('touchend', handleEnd, false);

            function handleStart(ev) {
                var touch = ev.changedTouches[0];

                startPoint.x = touch.pageX;
                startPoint.y = touch.pageY;
            }
            function handleMove(ev) {
                ev.preventDefault();

                isTouchMove = true;

                var touch = ev.changedTouches[0];
                var diffPoint = {};
                var movePoint = {
                    x: 0,
                    y: 0
                };

                diffPoint.x = touch.pageX - startPoint.x;
                diffPoint.y = touch.pageY - startPoint.y;

                if (options.x) {
                    movePoint.x = diffPoint.x + curPoint.x;
                }
                if (options.y) {
                    movePoint.y = diffPoint.y + curPoint.y;
                }

                move(el, movePoint.x, movePoint.y);
            }
            function handleEnd(ev) {
                if (!isTouchMove) return;

                var touch = ev.changedTouches[0];

                curPoint.x += touch.pageX - startPoint.x;
                curPoint.y += touch.pageY - startPoint.y;

                isTouchMove = false;
            }

            function move(el, x, y) {
                x = x || 0;
                y = y || 0;

                el.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0)';
            }
        }
    </script>
    <script>
        var backtop = document.getElementById('backtop');
        drag(backtop, {
            x: true,
            y: true
            // y: true
        });
    </script>
</body>
</html>