事件（触屏事件）

最新推荐文章于 2023-03-05 21:13:21 发布

章鱼Cc_yoo

最新推荐文章于 2023-03-05 21:13:21 发布

阅读量75

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/Cc200171/article/details/124970006

版权

触屏事件

1.兼容DOM的触发事件

touchstart 当手指触摸屏幕时触发；

touchmove 当手指在屏幕上滑动式连续触发；

touchend 当手指从屏幕上移开时触发；

touchcancel 当系统停止跟踪触摸时触发；

2.每个touch对象包含的属性

clientX 触摸目标在视口中的x坐标

clientY 触摸目标在视口中的y坐标

pageX 触摸目标在页面中的x坐标

pageY 触摸目标在页面中的y坐标

screenX 触摸目标在屏幕中的x坐标

screenY 触摸目标在屏幕中的y坐标

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, user-scale=0"> 
    <title>变清晰</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body, .wrap{
            width: 100vw;
            height: 100vh;
            background-image: url(../../day12事件/img/07.jpg);
            background-size: cover;
            background-position: center center;
        }
        .wrap:nth-of-type(1) {
            filter: blur(20px);
        }
        .wrap{
            position: absolute;
            top: 0;
            left: 0;
        }
        .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>

章鱼Cc_yoo

关注

0
点赞
踩
0

收藏

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

触屏事件1.兼容DOM的触发事件 touchstart 当手指触摸屏幕时触发； touchmove 当手指在屏幕上滑动式连续触发； touchend 当手指从屏幕上移开时触发； touchcancel 当系统停止跟踪触摸时触发；2.每个touch对象包含的属性 clientX 触摸目标在视口中的x坐标 clientY 触摸目标在视口中的y坐标 pageX 触摸目标在页面中的x坐标 pageY 触摸目标在页面中的y坐标 scre...
复制链接

扫一扫