web移动端 touchstar事件,touchmove事件 touchend事件

最新推荐文章于 2021-11-24 23:23:21 发布

一个半路出家的人

最新推荐文章于 2021-11-24 23:23:21 发布

阅读量1.2k

点赞数 1

分类专栏：前端Html

本文链接：https://blog.csdn.net/qq_42039281/article/details/83316816

版权

前端Html 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

web移动端开发中常用的三个事件,现在的智能机都是触屏操作.所以触摸在移动端的开发中几乎无处不在,下面介绍移动开发中常用的几个事件

touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

touchend事件：当手指从屏幕上离开的时候触发
touchcancel事件：当系统停止跟踪触摸的时候触发。关于这个事件的确切出发时间，文档中并没有具体说明

(touchcancel事件简单的说是在移动端发生了触摸中断，一般情况下就是优先级比当前活动更高的事件时，才会触发的。比如正在看新闻，手指滑动屏幕的时候，突然来电话，直接中断了触摸事件，跳转到了通话，页面此时就触发了touchcancel事件。这个事件不容易在浏览器的模拟器中模拟，之前我在用电脑的任务栏切换的时候，受到启发，可以试试在浏览器模拟器触摸的同时，按下键盘上的Alt+Tab键，果然触发了touchcancel事件，有兴趣的小伙伴可以试一下。)

这几个事件都会冒泡,也可以取消,虽然这些触摸事件没有在DOM规范中定义，但是它们却是以兼容DOM的方式实现的。所以，每个触摸事件的event对象都提供了在鼠标实践中常见的属性：bubbles(起泡事件的类型)、cancelable(是否用 preventDefault() 方法可以取消与事件关联的默认动作)、clientX(返回当事件被触发时，鼠标指针的水平坐标)、clientY(返回当事件触发时，鼠标指针的垂直坐标)、screenX(当某个事件被触发时，鼠标指针的水平坐标)和screenY(返回当某个事件被触发时，鼠标指针的垂直坐标)。除了常见的DOM属性，触摸事件还包含下面三个用于跟踪触摸的属性。

touches：表示当前跟踪的触摸操作的touch对象的数组。

targetTouches：特定于事件目标的Touch对象的数组。

changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。

以上三个对象都包含一下属性

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

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

identifier：标识触摸的唯一ID。

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

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

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

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

target：触目的DOM节点目标

代码演示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>web移动端的事件</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        body {

            min-width: 320px;
            max-width: 732px;
            height: 1000px;
            margin: 0 auto;
            border: 1px red solid;
        }

        #box {
            width: 50%;
            height: 200px;
            background-color: lightgrey;
        }
    </style>
</head>
<body>
<div class="container">
    <div id="box"></div>
</div>
<script>
    var boxObj=document.getElementById('box');

// //    添加事件
//     boxObj.addEventListener('touchstart',function(e){
//         console.log('start');
//         console.log(e);
//     });
//
//     boxObj.addEventListener('touchmove',function(e){
//         console.log('move');
//         // console.log(e);
//     });
//
//     boxObj.addEventListener('touchend',function(e){
//         console.log('end');
//         console.log(e);
//     })

    /*==========封装手势事件函数===========*/
    /**
     *
     * @param dom 滑动的元素
     * @param leftCallBack 向左滑动的回调函数
     * @param rightCallBack 向右滑动的回调函数
     */
    var bindSwipeEvent = function(dom,leftCallBack,rightCallBack){
        var isMove=false;//判断是否在滑动
        var startX = 0;//记录滑动开始的位置
        var distanceX=0;//记录移动的距离

        dom.addEventListener('touchstart',function(e){
            //这个事件主要是用来获得  滑动开始的点的位置
            startX=e.touches[0].clientX;
        });
        dom.addEventListener('touchmove',function(e){
            isMove=true;
            var moveX = e.touches[0].clientX;//此时移动到的位置的水平距离
            distanceX=moveX-startX;
        });
        dom.addEventListener('touchend',function (e) {
            if(isMove&&Math.abs(distanceX)>50){//当滑动的距离大于50时 才能执行相应的功能
                if(distanceX>0){//向右滑动
                    rightCallBack&&rightCallBack.call(this,e);//改变this的指向
                   
                }else{//向右滑动
                    leftCallBack&&leftCallBack.call(this,e);
                }
            }
        });
        //重置参数
         isMove=false;//判断是否在滑动
         startX = 0;//记录滑动开始的位置
         distanceX=0;//记录移动的距离
    };

    //调用函数
    bindSwipeEvent(boxObj,function(){
        console.log('向左滑动');
    },function () {
        console.log('向右滑动')
    })
</script>

</body>
</html>

一个半路出家的人

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
web移动端 touchstar事件,touchmove事件 touchend事件

web移动端开发中常用的三个事件,现在的智能机都是触屏操作.所以触摸在移动端的开发中几乎无处不在,下面介绍移动开发中常用的几个事件touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。touchend事件：当手指从屏幕上...
复制链接

扫一扫