移动端touch事件详解

最新推荐文章于 2022-05-25 21:22:25 发布
最新推荐文章于 2022-05-25 21:22:25 发布
阅读量2.5k 收藏 10
点赞数 2
分类专栏： javascript html5 文章标签： html5 touch
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bboyjoe/article/details/80207579
版权

1.单点触摸拖拽

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>touch拖动元素</title>
    <style>
        html,body{
            margin: 0;
            padding: 0;
            height: 3000px;
        }
        .box{
            width: 2rem;
            height: 2rem;
            background-color: #ccc;
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<div class="box"></div>

</body>
</html>
        window.onload = function () {
            //rem布局
            document.documentElement.style.fontSize = document.documentElement.clientWidth*100/750 + 'px';
            let oBox = document.getElementsByClassName('box')[0];
            oBox.addEventListener('touchstart',function (e) {
                //存距离
                let disX = e.targetTouches[0].pageX - oBox.offsetLeft;
                let disY = e.targetTouches[0].pageY - oBox.offsetTop;
                //默认阻止滚动事件和冒泡
                e.preventDefault();
                e.cancelBubble = true;
                function fnMove(e) {
                    oBox.style.left = e.targetTouches[0].pageX - disX + 'px';
                    oBox.style.top = e.targetTouches[0].pageY - disY + 'px';
                }
                function fnEnd() {
                    oBox.removeEventListener('touchmove',fnMove,false);
                    oBox.removeEventListener('touchend',fnEnd,false);
                }
                oBox.addEventListener('touchmove',fnMove,false);
                oBox.addEventListener('touchend',fnEnd,false);
            },false)
        }

2.多点触摸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>touch多点触摸</title>
    <style>
        html,body{margin: 0;padding: 0;height: 3000px;}
        .box{width: 2rem;height: 2rem;position: absolute;}
        .box1{background-color: red;left: 0; top: 0;}
        .box2{background-color: green;left: 210px; top: 50px;}
        .box3{background-color: blue;left: 150px; top: 130px;}
    </style>
    <script>
        window.onload = function () {
            document.documentElement.style.fontSize = document.documentElement.clientWidth*100/750 + 'px';
            let oBoxs = document.getElementsByClassName('box');
            Array.from(oBoxs).forEach(oBoxs=>{
                drag(oBoxs);
            });
            
            function drag(obj) {
                obj.addEventListener('touchstart',e=>{
                    e.preventDefault();
                    e.cancelBubble = true;
                    let id = e.targetTouches[0].identifier;
                    let disX = e.targetTouches[0].pageX - obj.offsetLeft;
                    let disY = e.targetTouches[0].pageY - obj.offsetTop;
                    function fnMove(e) {
                        e.preventDefault();
                        e.cancelBubble = true;
                        obj.style.left = e.targetTouches[0].pageX - disX + 'px';
                        obj.style.top = e.targetTouches[0].pageY - disY + 'px';
                    }
                    function fnEnd(e) {
                        let found = false;
                        Array.from(e.changedTouches).forEach(touch=>{
                            if(touch.identifier == id){
                                found = true;
                            }
                        });
                        if(found){
                            obj.removeEventListener('touchmove',fnMove,false);
                            obj.removeEventListener('touchend',fnEnd,false);
                        }

                    }
                    obj.addEventListener('touchmove',fnMove,false);
                    obj.addEventListener('touchend',fnEnd,false);
                },false);
            }
        }
    </script>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>

</body>
</html>

3.touch手势——旋转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>touch手势-旋转</title>
    <style>
        html,body{margin: 0;padding: 0;height: 3000px;}
        .box{
            width: 4rem; height: 4rem;
            background-color: yellowgreen; text-align: center;
            line-height: 4rem; margin: 2rem auto 0;
            font-size: 0.5rem; transform: rotate(45deg)}
    </style>
    <script>
        window.onload = function () {
            document.documentElement.style.fontSize = document.documentElement.clientWidth*100/750 + 'px';
            let oBox = document.querySelector('.box');
            let old_ang = 45;
            let start_ang,ang;
            oBox.addEventListener('touchstart',e=>{
                if(e.targetTouches.length >= 2){
                    e.preventDefault();
                    e.cancelBubble = true;
                    start_ang = old_ang;
                    let disX = e.targetTouches[0].clientX - e.targetTouches[1].clientX;
                    let disY = e.targetTouches[0].clientY - e.targetTouches[1].clientY;
                    ang = Math.atan2(disY,disX)*180/Math.PI;
                    oBox.addEventListener('touchmove',fnMove,false);
                    oBox.addEventListener('touchend',fnEnd,false);
                }

                function fnMove(e) {
                    e.preventDefault();
                    e.cancelBubble = true;
                    if(e.targetTouches.length >= 2){
                        let disX = e.targetTouches[0].clientX - e.targetTouches[1].clientX;
                        let disY = e.targetTouches[0].clientY - e.targetTouches[1].clientY;
                        let ang2 = Math.atan2(disY,disX)*180/Math.PI;
                        old_ang = start_ang + ang2 - ang;
                        oBox.style.transform = `rotate(${old_ang}deg)`;
                    }
                }
                function fnEnd() {
                    oBox.removeEventListener('touchmove',fnMove,false);
                    oBox.removeEventListener('touchend',fnEnd,false);
                }

            },false);
        }
    </script>
</head>
<body>
<div class="box">
    旋转旋转旋转
</div>

</body>
</html>

4.touch手势——缩放

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>touch手势-缩放</title>
    <style>
        html,body{margin: 0;padding: 0;height: 3000px;}
        .box{
            width: 4rem; height: 4rem;
            background-color: yellowgreen; text-align: center;
            line-height: 4rem; margin: 2rem auto 0;
            font-size: 0.5rem;}
    </style>
    <script>
        window.onload = function () {
            document.documentElement.style.fontSize = document.documentElement.clientWidth*100/750 + 'px';
            let oBox = document.querySelector('.box');
            oBox.addEventListener('touchstart',e=>{
                e.preventDefault();
                e.cancelBubble = true;
                let w = oBox.offsetWidth,h = oBox.offsetHeight;
                let dis = Math.sqrt(Math.pow(e.targetTouches[0].clientX - e.targetTouches[1].clientX,2) + Math.pow(e.targetTouches[0].clientY - e.targetTouches[1].clientY,2));
                if(e.targetTouches.length >= 2){
                    oBox.addEventListener('touchmove',fnMove,false);
                    oBox.addEventListener('touchend',fnEnd,false);
                }
                function fnMove(e) {
                    e.preventDefault();
                    e.cancelBubble = true;
                    if(e.targetTouches.length >= 2){
                        let dis2 = Math.sqrt(Math.pow(e.targetTouches[0].clientX - e.targetTouches[1].clientX,2) + Math.pow(e.targetTouches[0].clientY - e.targetTouches[1].clientY,2));

                        oBox.style.width = dis2*w/dis + 'px';
                        oBox.style.lineHeight= oBox.style.height = dis2*h/dis + 'px';
                    }
                }
                function fnEnd() {
                    oBox.removeEventListener('touchmove',fnMove,false);
                    oBox.removeEventListener('touchend',fnEnd,false);
                }



            },false);
        }
    </script>
</head>
<body>
<div class="box">
    缩放
</div>

</body>
</html>

5.方向锁定&banner滚动&下拉刷新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <title>方向锁定&banner滚动&下拉刷新</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        body{
            overflow: hidden;
        }
        #wrap{
            background: #ccc;
        }
        .load_more{
            position: relative;
            font-size: 15px;
            line-height: 30px;
            text-align: center;
            z-index: 1;
        }
        #content{
            position: relative;
            z-index: 2;
            top: -30px;
            background: #fff;
            transform: translateY(0);
        }
        #banner{
            width: 7.5rem;
            height: 3rem;
            overflow: hidden;
        }
        #banner ul{
            width: 37.5rem;
            height: 3rem;
            transform: translateX(0);
        }
        #banner ul li{
            float: left;
            width: 7.5rem;
            height: 3rem;
            line-height: 3rem;
            text-align: center;
        }
    </style>
</head>
<body>
<div id="wrap">
    <div class="load_more">
        下拉刷新
    </div>
    <div id="content">
        <div id="banner">
            <ul>
                <li style="background: #0FC">0</li>
                <li style="background: #FC0">1</li>
                <li style="background: #F0C">2</li>
                <li style="background: #0CF">3</li>
                <li style="background: #CF0">4</li>
            </ul>
        </div>
        <ol></ol>
    </div>
</div>


<script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth*100/750 + 'px';
    let banner = document.getElementById('banner');
    let content = document.getElementById('content');
    let load_more = document.getElementsByClassName('load_more')[0];
    let banner_ul = banner.children[0];
    let banner_left = 0;
    let content_top = 0;
    function loadData(fn) {
        $.ajax({
            url: 'data.txt?t=' + Math.random(),
            success(str){
                let arr = str.split('\n');
                $('ol').html('');
                arr.forEach(s=>{
                    $(`<li>${s}</li>`).appendTo('ol');
                });
                fn&&fn();
            },
            error(){
                alert('加载失败');
            }
        })
    }
    loadData();
    banner.addEventListener('touchstart',function (e) {
        let startX = e.targetTouches[0].clientX;    //手指初始位置X
        let startY = e.targetTouches[0].clientY;    //手指初始位置Y
        let dir = '';   //方向
        let disX = startX - banner_left;
        let disY = startY - content_top;

        banner_ul.style.transition = '';
        content.style.transition = '';
        function fnMove(e) {
            let x = e.targetTouches[0].clientX;
            let y = e.targetTouches[0].clientY;
            //阈值5
            if(!dir){
                if(Math.abs(x- startX) >= 5){
                    dir = 'x';
                }else if(Math.abs(y - startY) >= 5){
                    dir = 'y';
                }
            }else{
                if(dir === 'x'){    //处理banner滚动
                    banner_left = x - disX;
                    banner_ul.style.transform = `translateX(${banner_left}px)`;
                }else if(dir === 'y'){      //处理页面滚动
                    content_top = y - disY;
                    if(content_top > 0){
                        content.style.transform = `translateY(${content_top/3}px)`;
                        if(content_top >= 100){
                            load_more.innerHTML = '松开加载';
                        }else{
                            load_more.innerHTML = '下拉刷新';
                        }
                    }else{
                        content.style.transform = `translateY(${content_top}px)`;
                    }

                }
            }
        }
        function fnEnd() {
            banner.removeEventListener('touchmove',fnMove,false);
            banner.removeEventListener('touchend',fnEnd,false);
            if(dir === 'x'){    //处理banner滚动
                let n = Math.round(-banner_left/banner.offsetWidth);
                if(n < 0){
                    n = 0;
                }else if(n >= banner_ul.children.length){
                    n = banner_ul.children.length - 1;
                }
                banner_left = -n * banner.offsetWidth;
                banner_ul.style.transition = '0.7s all ease';
                banner_ul.style.transform = `translateX(${banner_left}px)`;
            }else if(dir === 'y'){  //处理页面滚动
                if(content_top >= 100){
                    content_top = 30;
                    load_more.innerHTML = '正在加载...';
                    loadData(function () {
                        load_more.innerHTML = '下拉刷新';
                        content_top = 0;
                        content.style.transition = '0.7s all ease';
                        content.style.transform = `translateY(${content_top}px)`;
                    })
                }else{
                    content_top = 0;
                }
                content.style.transition = '0.7s all ease';
                content.style.transform = `translateY(${content_top}px)`;
            }
        }
        banner.addEventListener('touchmove',fnMove,false);
        banner.addEventListener('touchend',fnEnd,false);
    },false);

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

6.双击+长按

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>双击+长按</title>
    <style>
        #btn{
            width: 2rem;
        }
    </style>
</head>
<body>
<input type="button" value="按钮" id="btn">


<script>
    document.documentElement.style.fontSize = document.documentElement.clientWidth*100/750 + 'px';
    let btn = document.getElementById('btn');
    let t = 0;
    let lastTap = 0;
    let timer = null;
    btn.addEventListener('touchstart',function () {
        t = Date.now();
        timer = setTimeout(function () {
             console.log('长按了');
        },1500);
    },false);

    btn.addEventListener('touchend',function () {
        clearTimeout(timer);
        if(Date.now() - t <= 700){
            console.log('tap');
            if(Date.now() - lastTap <= 300){
                console.log('double tap');
            }
            lastTap = Date.now();
        }else{
            console.log('long tap');
        }
    },false);

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

bboyjoe
关注
专栏目录
移动基础笔记
qq_64353584的博客
03-25 1153
em em:就是一种长度单位，它是参照当前元素的字号，如果没有设置，就参照父容器或者当前浏览器的默认字号 rem rem是css3新增的一种长度单位，它是参照根元素(html)的字号 获取宽度 获取宽度的方法的说明： * width():它只能得到当前元素的内容的宽度 * innerWidth():它能获取当前元素的内容的宽度+padding * outerWidth():获取当前元素的内容的宽度+padding+border 移动事件 console.log(e.touches); c
移动端开发-touch事件及其相关属性
柒青衿的博客
06-04 3940
1. 为什么移动端使用touch事件习惯在电脑上写js代码的同学可能想问一个问题：为什么移动端要使用touch事件，mouse事件和click事件在手机上不能触发么？其实这个问题很容易解决。首先，这两类事件在移动端也可以触发，但分别有一些问题：移动端会多点触屏，不适合mouse ，而click事件在手机上有 300ms延迟（不是bug）。因此，在移动端绑定事件，最好使用专门为移动端设计的touch事
简单写一个移动端touch事件
a1010861234的博客
01-03 154
var mybody = document.getElementsByTagName('body')[0]; //滑动处理 var startX, startY, moveEndX, moveEndY, X, Y; mybody.addEventListener('touchstart', function(e) { e.p...
移动端事件应用之targetTouches
weixin_46513664的博客
03-25 1003
一、移动端块的移动 二、移动端方向锁定 一、移动端块的移动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...
【移动端】事件（touchstart、touchmove、touchend、touchcancel）跟事件对象属性（changedTouches、targetTouches、touches）
马云
01-18 1065
文章目录事件事件类型事件绑定事件对象属性在touchstart 事件中在 touchmove 事件中在 touchend 事件中 事件 事件类型 touchstart 元素上触摸开始时触发 touchstart 事件可用于元素触摸的交互，比如页面跳转，标签页切换 touchmove 元素上触摸移动时触发 touchmove 事件可用于页面的滑动特效，网页游戏，画板 touchend 手指从元素上离开时触发 touchend 事件主要跟 touchmove 事件结合使用 touchcanc
HTML---JS移动端触屏事件touch详解
qq_51874203的博客
05-25 1824
HTML---JS移动端触屏事件touch详解
js移动端事件基础及常用事件库详解
10-19
本文从移动端事件基础讲起，详细介绍了移动事件和PC端事件的区别，以及如何处理移动端特有的TOUCH事件和GESTURE事件。针对移动端click事件的延迟问题，提供了通过TOUCH事件模拟click和使用fastclick.js库的解决方案...
vue移动端的左右滑动事件详解
10-15
在移动端，触摸事件会更为复杂，因为它包含了多点触摸（multi-touch）的情况。在处理滑动事件时，我们通常会关心手指在屏幕上的移动距离和移动方向，以及滑动结束时的停留位置。 在提供的文件内容中，我们可以看到...
移动web开发之touch事件实例详解
08-28
在移动Web开发中，触摸事件（Touch Events）是构建交互式应用的关键，特别是在没有传统鼠标和键盘的触摸屏设备上。这些事件使得开发者能够监听用户的触摸动作，从而创建出更直观、更符合移动设备用户体验的界面。...
touch事件中的touches、targetTouches和changedTouches详解
weixin_38170829的博客
10-27 730
touches: 当前屏幕上所有触摸点的列表; targetTouches: 当前对象上所有触摸点的列表; changedTouches: 涉及当前(引发)事件的触摸点的列表 通过一个例子来区分一下触摸事件中的这三个属性： 1. 用一个手指接触屏幕，触发事件，此时这三个属性有相同的值。 2. 用第二个手指接触屏幕，此时，touches有两个元素，每个手指触摸点为一个值。当两个手...
搜索中的 Query 理解及应用
SeaSky_Steven的博客
05-08 6872
文章作者：Joelchen 腾讯 研究员 编辑整理：Hoh 内容来源：腾讯技术工程 出品平台：DataFunTalk 注：转载请联系原作者。 导读：Query 理解 ( QU，Query Understanding )，简单来说就是从词法、句法、语义三个层面对 query 进行结构化解析。这里 query 从广义上来说涉及的任务比较多，最常见的就是我们在搜索系统中输入的查询词，也可以是 FAQ 问答或阅读理解中的问句，又或者可以是人机对话中用户的聊天输入。本文主要介绍在搜索中的 query .
移动端web开发---Touch事件详解
热门推荐
完善飞跃
05-30 3万+
一、pc端事件回顾HTML事件、DOM0事件、DOM2事件事件对象。如果上述概念不清楚，请先去了解。二、移动端事件简介2.1 pc端事件在移动端的问题​ 移动设备主要特点是不配备鼠标，键盘也只是在需要输入的地方才会激活虚拟机键盘。所以以前的pc端事件在移动端使用起来就没有以前那么爽了，虽然部分仍然可以使用。 click事件的300ms延迟问题。​2007年第一代iphone发布，由于那个年代所
Variation of e.touches, e.targetTouches and e.changedTouches
weixin_30512089的博客
12-12 132
We have the following lists: touches: A list of information for every finger currently touching the screen targetTouches: Like touches, but is filtered to only the information for finger touches t...
js 监听移动端web触屏事件 滑动响应
weixin_30426879的博客
03-24 686
直接上例子，以vue应用为例： html: <ul> <li v-for="item in items" :class="{finished:item.isFinished}" @click="toggleFinish(item)" @touchstart="touchstart()" @touchmove="touc...
html5触屏滑动事件,HTML5的touch事件详解
weixin_42400970的博客
06-05 1052
原标题：HTML5的touch事件详解HTML5中新添加了很多事件，比较常看到的是touch事件，下面来详解下html5中的触摸touch事件。touchstart：触摸开始的时候触发touchmove：手指在屏幕上滑动的时候触发touchend：触摸结束的时候触发每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点(用来实现多点触控)touches：当前位于屏幕上的所有手指的列表...
HTML5触摸事件(touchstart、touchmove和touchend) （转）
zhangzhiyong666的博客
07-31 2228
　　touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。 　　touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。 　　touchend事件：当手指从屏幕上离开的时候触发。 　　touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值