1. JavaScript 移动端的触摸事件

草木红

已于 2022-04-26 20:22:43 修改

阅读量344

点赞数

分类专栏： # JavaScript 文章标签： javascript

于 2020-03-20 18:33:25 首次发布

本文链接：https://blog.csdn.net/kouzuhuai2956/article/details/104982733

版权

JavaScript 专栏收录该内容

28 篇文章 2 订阅

订阅专栏

参考文档：

TouchEvent触摸事件：https://developer.mozilla.org/zh-CN/docs/Web/API/TouchEvent
Touch触摸对象属性：https://developer.mozilla.org/zh-CN/docs/Web/API/Touch

触摸事件的类型

touchstart：触摸绑定此事件的元素时触发
touchmove：在绑定此事件的元素中滑动时触发(滑动开始的位置需要在该元素上，滑动结束的位置不在该元素上也行)
touchend：离开绑定此事件的元素时触发(滑动开始的位置需要在该元素上，滑动结束的位置不在该元素上也行)
touchcancel：触摸被中断时触发（如被短信，提示等）

TouchEvent属性

changedTouches：包含了代表所有从上一次触摸事件到此次事件过程中，状态发生了改变的触点的 Touch 对象。
targetTouches ：当前元素的触发点集合
touches：页面上所有触发点集合。

touch对象属性(属于TouchList中的一个)

pageX，pageY：基于页面(视口)的坐标
clientX，clientY：基于浏览器窗口(视口)的坐标
screenX，screenY：基于屏幕的坐标

移动端绑定事件

element.addEventListener(event, function [, useCapture] )

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .box{
            width:200px;
            height: 200px;
            background-color: pink;
            margin:0 auto;
        }
    </style>
</head>
<body>
    <div class="box"></div>

    <script>
        window.onload = function(){
            console.log(TouchList);
            var box = document.querySelector(".box");
            box.addEventListener('touchstart', function(){
                console.log('start');
                console.log(event);
                console.log(event.changedTouches);
                /*console.log(event.touches);*/
            });
            box.addEventListener('touchmove', function(){
                console.log('move');
                console.log(event);
                console.log(event.changedTouches);
                /*console.log(event.changedTouches[0].clientX);*/
            });
            box.addEventListener('touchend', function(){
                console.log('end');
                console.log(event);
                console.log(event.changedTouches);
               /*console.log(event.touches);*/
            });
        }
	</script>
</body>
</html>

在这里插入图片描述

草木红

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
1. JavaScript 移动端的触摸事件

触摸事件的类型touchstart：触摸绑定此事件的元素时触发touchmove：在绑定此事件的元素中滑动时触发(滑动开始的位置需要在该元素上，滑动结束的位置不在该元素上也行)touchend：离开绑定此事件的元素时触发(滑动开始的位置需要在该元素上，滑动结束的位置不在该元素上也行)touchcancel：触摸被中断时触发（如被短信，提示等）TouchEvent属性cha...
复制链接

扫一扫

专栏目录