zoukankan      html  css  js  c++  java
  • 触摸事件

     案例 

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            div {
                position: relative;
                left: 0;
                 100px;
                height: 100px;
                background-color: pink;
            }
        </style>
    </head>

    <body>
        <div></div>

        <script>
            var div = document.querySelector('div');
            //  手指的初始坐标
            var startX = 0;
            var startY = 0;
            // 盒子的初始位置
            var x = 0;
            var y = 0;
            div.addEventListener('touchstart', function(e) {
                startX = e.targetTouches[0].pageX;
                startY = e.targetTouches[0].pageY;
                x = this.offsetLeft;
                y = this.offsetTop;
            });
            div.addEventListener('touchmove', function(e) {
                // 计算手指的移动距离
                var moveX = e.targetTouches[0].pageX - startX;
                var moveY = e.targetTouches[0].pageY - startY;
                // 移动盒子 盒子原来的位置 + 手指移动的距离
                this.style.left = x + moveX + 'px';
                this.style.top = y + moveY + 'px';
                // 阻止屏幕滚动的默认行为
                e.preventDefault();
            });
        </script>
    </body>

    </html>
  • 相关阅读:
    IE7局部滚动区域下绝对定位或相对定位元素不随滚动条滚动的bug
    Webstorm编译TypeScript报错
    Javascript动态创建 style 节点
    css多栏自适应布局
    禁用右键
    Mac下启动和停止Mysql服务
    codemirror
    JavaScript 中的事件流和事件处理程序(读书笔记思维导图)
    mac压缩文件乱码
    Mybatis框架五:动态SQL
  • 原文地址:https://www.cnblogs.com/ericblog1992/p/13062211.html
Copyright © 2011-2022 走看看