js 手机触屏事件

最新推荐文章于 2023-12-25 12:37:34 发布

黄大仙No.1

最新推荐文章于 2023-12-25 12:37:34 发布

阅读量1.2k

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_44378358/article/details/107933277

版权

javascript 专栏收录该内容

104 篇文章 9 订阅

订阅专栏

触屏touch事件	说明
touchstart	手指在触摸到一个dom元素时触发
touchumove	手指在一个dom元素上滑动时触发
touchend	手指从一个dom元素上移开时触发

在这里插入图片描述

代码示例,主页要在控制台点击下面图标进入手机显示模式
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 800px;
            height: 800px;
            text-align: center;
            font-size: 160px;
            line-height: 800px;
            background-color: pink;
        }
    </style>
</head>
<body>
<div></div>
<script>
    var div=document.querySelector('div');
    div.addEventListener('touchstart',function () {
        console.log('我摸了你');
        div.innerHTML='我被摸了';
    })
    div.addEventListener('touchmove',function () {
        console.log('我继续摸你');
        div.innerHTML='我正在被摸';
    })
    div.addEventListener('touchend',function () {
        console.log('轻轻的我走了');
        div.innerHTML='它走了';
    })
</script>
</body>
</html>

黄大仙No.1

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js 手机触屏事件

触屏touch事件说明touchstart手指在触摸到一个dom元素时触发touchumove手指在一个dom元素上滑动时触发touchend手指从一个dom元素上移开时触发代码示例,主页要在控制台点击下面图标进入手机显示模式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</...
复制链接

扫一扫

专栏目录