Java,C++,HTML资料汇总(一)

池化技术学习及golang实现

  返回  

移动web开发入门-学习笔记-4

2021/8/20 23:23:20 浏览:

文章目录

  • 移动端事件
    • 一、触摸事件
      • touch事件
        • touch事件基础
        • touch事件的event对象
        • 单指拖拽—运动
        • 单指拖拽—拖拽
      • 第三方触摸事件库
    • 二、pointer事件
    • 三、传感器事件

移动端事件

一、触摸事件

touch事件

touch事件基础

 <title>2.1 touch事件基础</title>
    <style>
        .box {
            width: 150px;
            height: 150px;
            background-color: red;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div id="box" class="box"></div>

    <script>
        var boxEl = document.getElementById('box');

        // boxEl.ontouchstart = handleStart;
        // boxEl.ontouchmove = handleMove;
        // boxEl.ontouchend = handleEnd;
        // boxEl.ontouchcancel = handleCancel;

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

        function handleStart() {
            console.log('touchstart');
        }
        function handleMove() {
            console.log('touchmove');
        }
        function handleEnd() {
            console.log('touchend');
        }
    </script>
</body>

touch事件的event对象

      function handleStart(ev) {
            console.log('touchstart', ev);
             console.log(ev.touches, ev.targetTouches, ev.changedTouches);
            var touch = ev.changedTouches[0];

            console.log(touch.pageX, touch.pageY);
        }
        function handleMove(ev) {
            console.log('touchmove');
        }
        function handleEnd(ev) {
            console.log('touchend', ev);
             console.log(ev.touches, ev.targetTouches, ev.changedTouches);
        }

单指拖拽—运动

<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>
        var backtop = document.getElementById('backtop');
        var curPoint = {
            x: 0,
            y: 0
        };

        backtop.addEventListener('click', function () {
            // move(this, 0, 0);
            move(this, -10 + curPoint.x, -10 + curPoint.y);
            curPoint.x += -10;
            curPoint.y += -10;
        }, false);

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

            el.style.transform = 'translate3d(' + x + 'px, ' + y + 'px, 0)';
        }
    </script>

单指拖拽—拖拽

  <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>

第三方触摸事件库

hammer.js

<style>
        .box {
            width: 150px;
            height: 150px;
            background-color: red;
            margin: 20px auto;
        }
    </style>
</head>
<body>

    <div id="box" class="box"></div>

    <script src="js/hammer.min.js"></script>
    <script>
        var boxEl = document.getElementById('box');

        var hammer = new Hammer(boxEl);
        hammer.on('swipe pan tap doubletap press pinch rotate', function (ev) {
            // console.log(ev.type);
            console.log(ev);
        });

        // hammer.on('swipeleft', function (ev) {
        //     console.log('next');
        // });
        // hammer.on('swiperight', function (ev) {
        //     console.log('prev');
        // });
    </script>
</body>

二、pointer事件

指针事件 - Pointer events 是一类可以为定点设备所触发的DOM事件。它们被用来创建一个可以有效掌握各类输入设备(鼠标、触控笔和单点或多点的手指触摸)的统一的DOM事件模型。所谓 指针 是指一个可以明确指向屏幕上某一组坐标的硬件设备。建立这样一个单独的事件模型可以有效的简化Web站点与应用所需的工作,同时也便于提供更加一致与良好的用户体验,无需关心不同用户和场景在输入硬件上的差异。另外,对于某些需要处理特定设备的场景,指针事件也定义了一个 pointerType (en-US) 属性用以查看触发事件的设备类型。

这些事件需要能够处理 mouse events 之类较为通用的指针输入(mousedown/pointerdown, mousemove/pointermove, 等)。 因此,指针事件的类型,很大程度上类似于当前的鼠标事件类型。

此外,一个指针事件,也同时包含了鼠标事件中所常见的属性(client coordinates, target element, button states,等)以及适用于其他输入设备的新属性:pressure, contact geometry, tilt, 等等。实际上,PointerEvent 接口继承了所有 MouseEvent 中的属性,以保障原有为鼠标事件所开发的内容能更加有效的迁移到指针事件。

三、传感器事件

联系我们

如果您对我们的服务有兴趣,请及时和我们联系!

服务热线:18288888888
座机:18288888888
传真:
邮箱:888888@qq.com
地址:郑州市文化路红专路93号