移动端进阶之touch触摸事件，拖拽事件 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 150px;
            height: 150px;
            background-color: red;
            margin: 20px auto;
        }
    </style>
</head>
<body>
    <div id="box" class="box"></div>
    <script>

        // 注意：一下触摸事件，必须在移动端才会触发，在浏览器中调试，要写换成移动端模式
        // function load (){ 
            var boxEL = document.getElementById('box');
            // boxEL.ontouchstart = handleStart;
            // boxEL.ontouchmove = handleMove;
            // boxEL.ontouchend = handleEnd;
            // boxEL.oncancel = handleCancel;
            /* 以上写法比较老旧 */
            /* 支持新事件绑定语法 */
            boxEL.addEventListener('touchstart',handleStart,false); // （‘触发’，事件，是否捕获/false冒泡）
            boxEL.addEventListener('touchmove',handleMove,false);
            boxEL.addEventListener('touchend',handleEnd,false);
            function handleStart(ev) {
                // console.log('touchstart',ev);
                var touch = ev.changeTouches[0];
                console.log(touch.pageX, touch.pageY);
            }
            function handleMove(ev) {
                console.log('touchmove');
            }
            function handleEnd(ev) {
                console.log('touchend');
            }
        // }    
        // window.addEventListener('load',load, false);
    </script>
</body>
</html>

 

2.单指托拽实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单指拖拽</title>
    <style>
        .backtop {
            position: fixed;
            right: 20px;
            bottom: 20px;
            width: 45px;
            height: 45px;
            /* 知识点
            line-height是行高，针对的对象是文字，height针对的是容器，
            也就是高度，当height和line-height值相同时会居中，
            当line-height值小于height时文字向上移动，反之向下移动。
             */
            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 处理性能高 GUP */
        }
    </style>
</head>
<body>
    <a href="#" id="backtop" class="backtop">↑</a>
    <!-- <div id="backtop" class="backtop">↑</div> -->
    <script>
        var backtop = document.getElementById('backtop');
        /* 坐标原点 */
        var curPoint = {
            x: 0,
            y: 0
        }
        backtop.addEventListener('click', function() {
            move(this, -10 + curPoint.x, -10 + curPoint.y)
            curPoint.x += -10;
            curPoint.y += -10;
        }, false)

        function move(el, x, y) {
            x = x || 0; // 没有传就是0
            y = y || 0;
            
            el.style.transform = 'translate3d(' + x + 'px,' + y + 'px,0)';
        }
    </script>
</body>
</html>

 

posted @ 2021-02-20 22:35  小白咚  阅读(319)  评论(0)    收藏  举报