移动端-真机调试与TouchEvent

前端打手
360 阅读1分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 7 天，点击查看活动详情

移动端-真机调试

1、确保手机和电脑是在同一个局域网下面的
2、启一个本地服务器 我使用的是 http-server

安装 npm install http-server -g

启动 http-server

3、Mac下调试移动端

  • 在ios设备上设置允许调试

    设置 -> Safari浏览器 -> 高级 -> 网页检查器 打开

image.png

  • 在Mac上打开Safari浏览器的开发菜单

    顶部菜单栏中：Safari浏览器 -> 偏好设置 -> 高级 -> 勾选 '在菜单栏中显示“开发”菜单'

  • 打开调试页面

    使用有线连接手机与电脑；
    在ios上的浏览器访问要调试的页面 -> 在mac上的Safari浏览器点击'开发'菜单 -> 找到ios设备名称 -> 选择右侧二级菜单上对应的调试页面地址，即可调试了。

4、Android调试 数据线链接电脑与手机

window自带浏览器 访问地址：edge://inspect/#devices

Chrome进入 chrome://inspect/#devices

手机上打开开发者模式，打开USB调试

开启inspect debug

TouchEvent

TouchEvent 是一类描述手指在触摸平面（触摸屏、触摸板等）的状态变化的事件。这类事件用于描述一个或多个触点，使开发者可以检测触点的移动，触点的增加和减少，等等。

创建一个demo.html, 内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <script>
        (function () {
            var metaEl = document.createElement('meta');
            var scale = 1;
            metaEl.setAttribute('name', 'viewport');
            metaEl.setAttribute('content', 'initial-scale=' + (1 / scale) + ', maximum-scale=' + (1 / scale) + ', minimum-scale=' + (1 / scale) + ', user-scalable=no');
            document.documentElement.firstElementChild.appendChild(metaEl);
        })();
    </script>
    <title>Document</title>
    <style>
        #box1 {
            width: 60vw;
            height: 60vw;
            background: red;
            color: #fff;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="box1"></div>    
<script>
{
/*
    touches 当前屏幕上的手指列表
    targetTouches 当前元素上的手指列表
    changedTouches 触发当前事件的手指列表
*/
    box1.addEventListener("touchmove",(e)=>{
        box1.innerHTML = `
            当前屏幕上的手指个数:${e.touches.length}<br/>
            当前元素上的手指个数:${e.targetTouches.length}<br/>
            触发当前事件的手指个数:${e.changedTouches.length}<br/>
        `
    });
    document.addEventListener("touchstart",(e)=>{
        console.log(e)
        e.preventDefault();
    },{
        passive: false
    })


}    
</script>
</body>
</html>

打印出的touchevent内容信息，与页面显示内容：

image.png

image.png

滑屏操作

思路：滑屏类似于拖拽；

1、手指按下：记录位置


let startY = 0; // 按下时元素的位置
let translateY = 0; // 开始元素位置
let startPointY = 0;//按下时手指的位置

['滑动元素'].addEventListener("touchstart",({changedTouches})=>{
    startPointY = changedTouches[0].clientY; // 开始位置
    startY = translateY;
});

2、手指移动：记录手指新的位置，元素跟着手指移动相同距离

['滑动元素'].addEventListener("touchmove",({changedTouches})=>{
    let nowPointY = changedTouches[0].clientY; // 移动后位置
    let disY = nowPointY - startPointY;
    translateY = startY + disY; // 移动距离
    ['滑动元素'].style.transform = `translateY(${translateY}px)`;
});
avatar
文章
阅读
粉丝