JS-----触屏事件

童童童ing

已于 2022-05-25 21:26:47 修改

阅读量449

点赞数

文章标签： javascript 前端 html5

于 2022-05-25 17:45:22 首次发布

本文链接：https://blog.csdn.net/weixin_64804275/article/details/124970464

版权

触屏事件

触摸事件（兼容DOM）
触摸列表

触摸事件（兼容DOM）

touchstart当手指触屏时触发
touchmove当手指在屏幕上滑动时连续触发
touchend当手指从屏幕上移开时触发
touchcancel当系统停止跟踪触摸时触发

触摸列表

每个触摸事件包含三个触目列表
1.touches当前跟踪的触摸操作的Touch对象的数组
2.targetTouches特定于事件目标的Touch对象的数组
3.changeTouches自上次触摸以来发生哪些改变的Touch对象的数组
每个touch对象包含的属性
1.clientX触摸目标在视口中的x坐标
2.clientY触摸目标在视口中的y坐标
3.pageX触摸目标在页面中的x坐标
4.pageY触摸目标在页面中的y坐标
5.screenX触摸目标在屏幕中的x坐标
6.screenY触摸目标在屏幕中的y坐标
7.identifier标识触摸的唯一ID
8.target触摸的DOM节点目标

<!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>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .d1{
            width: 100px;
            height: 100px;
            background-color: pink;
        }
    </style>
</head>
<body>
    <div class="d1"></div>
</body>
<script src="https://cdn.bootcss.com/touchjs/0.2.14/touch.min.js"></script>
<script>
    var d1=document.querySelector("d1");
    touch.on(".d1","swiperight",function(e){
        console.log("right");
    })
</script>
</html>

右滑触屏，输出right
在这里插入图片描述

结合以下案例，该案例通过触屏实现蒙版变清晰


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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 用户不可操作  user-scalble=0 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalble=0">
    <title>变清晰</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body,
        .wrap {
            width: 100vw;
            height: 100vh;
            background-image: url(https://tse3-mm.cn.bing.net/th/id/OIP-C._epNDVBKWu30P_W3VHaMUAHaNJ?w=187&h=333&c=7&r=0&o=5&dpr=1.5&pid=1.7);
            background-size: cover;
            background-position: center center;
        }

        .wrap {
            position: absolute;
            top: 0;
            left: 0;
        }

        .wrap:nth-of-type(1) {
            filter: blur(20px);
        }
        .wrap:nth-of-type(2) {
          display: none;
        }
        .wrap.mask {
            display: block;
            -webkit-mask-image: -webkit-radial-gradient(#fff 65%,transparent 75%);
            -webkit-mask-size: 200px 200px;
            -webkit-mask-repeat: no-repeat;
        }
    </style>
</head>

<body>
    <div class="wrap"></div>
    <div class="wrap"></div>
</body>
<script>
    var d2=document.querySelector(".wrap:nth-of-type(2)");
    window.ontouchstart=function(e){
        d2.classList.add('mask');
    }
    window.ontouchmove=function(e){
        var touch=e.touches[0];
        d2.style.webkitMaskPosition=`${touch.clientX-100}px ${touch.clientY-100}px`;

    }
    window.ontouchend=function(){
        d2.classList.remove('mask');
    }
</script>
</html>

童童童ing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS-----触屏事件

触屏事件触摸事件（兼容DOM）触摸列表触摸事件（兼容DOM）touchstart当手指触屏时触发touchmove当手指在屏幕上滑动时连续触发touchend当手指从屏幕上移开时触发touchcancel当系统停止跟踪触摸时触发触摸列表每个触摸事件包含三个触目列表1.touches当前跟踪的触摸操作的Touch对象的数组2.targetTouches特定于事件目标的Touch对象的数组3.changeTouches自上次触摸以来发生哪些改变的Touch对象的数组每个touch对象包
复制链接

扫一扫