Vue.js移动端左滑demo和JS事件监听手机屏幕触摸事件 Touch

本文链接：https://blog.youkuaiyun.com/m_uncle/article/details/78129222

本文介绍了一个基于Vue.js的滑动解锁示例，并详细解释了如何使用touch事件实现移动端的滑动效果，同时提供了完整的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue.js移动端左滑demo和JS事件监听手机屏幕触摸事件 Touch

**
这是一个用vue.js写的一个仿滑动解锁的demo，和对Touch的一些理解

以下是四种touch事件

touchstart: //手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend: //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发，这个好像比较少用

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表

touches: //当前屏幕上所有手指的列表

targetTouches: //当前dom元素上手指的列表，尽量使用这个代替touches

changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches

这些列表里的每次触摸由touch对象组成，touch对象里包含着触摸信息，主要属性如下：

clientX / clientY: //触摸点相对浏览器窗口的位置

pageX / pageY: //触摸点相对于页面的位置

screenX / screenY: //触摸点相对于屏幕的位置

identifier: //touch对象的ID

target: //当前的DOM元素

注意：

手指在滑动整个屏幕时，会影响浏览器的行为，比如滚动和缩放。
所以在调用touch事件时，要注意禁止缩放和滚动。

1.禁止缩放

通过meta元标签来设置。

<meta name="viewport" content="target-densitydpi=320,width=640,user-scalable=no">

2.禁止滚动

preventDefault是阻止默认行为，touch事件的默认行为就是滚动。

event.preventDefault();

实例如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="https://unpkg.com/vue"></script>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
        <meta content="telephone=no" name="format-detection">
        <style>
            *{padding: 0;margin: 0;}
            body {background: #EEEEEE;}
            .box {text-align: center;}
            .btn {
                position: relative;
                width: 70%;
                height: 40px;
                margin: 150px auto;
                border-radius: 20px;
                background: #333333;
            }
            .btn-move {
                position: absolute;
                left: 0;
                top: 0;
                width: 40px;
                height: 40px;
                border-radius: 20px;
                background: #ededed;
            }
            .tt {
                font-size: 20px;
                color: #008000;
                text-align: center;
                margin-top: 50px;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <slide-release></slide-release>
        </div>

        <script type="text/x-template" id="slide">
            <div>
                <div class="btn" ref='remove'>
                    <span ref='btnImg' class="btn-move"  
                      @touchstart='touchStart' 
                      @touchmove='touchMove' 
                      @touchend='touchEnd' 
                      :style="slideEffect"
                     >
                    </span>
                </div>
                <p class="tt" v-show="isShow">你滑动成功了！</p>
            </div>


        </script>
        <script>
            Vue.component('slide-release',{
                template:'#slide',
                data:function(){
                    return {
                        isShow:false,
                        startX:0,//开始触摸的位置
                        moveX:0,//滑动时的位置
                        endX:0,//结束触摸的位置
                        disX:0,//移动距离
                        slideEffect:'',//滑动时的效果,使用v-bind:style="deleteSlider"

                    }
                },
                methods:{
                    touchStart:function(ev) {
                        ev = ev || event;
                        ev.preventDefault();
//                      console.log(ev.targetTouches);
//                      console.log(ev.changedTouches);
                        if(ev.touches.length == 1) {    //tounches类数组，等于1时表示此时有只有一只手指在触摸屏幕
                            this.startX = ev.touches[0].clientX; // 记录开始位置
                        }
                    },
                    touchMove:function(ev) {
                        ev = ev || event;
                        ev.preventDefault();
                        let btnWidth = this.$refs.remove.offsetWidth;  //$refs 减少获取dom节点的消耗
                        let btnImg = this.$refs.btnImg.offsetWidth;
                        console.log(ev.targetTouches);
                        console.log(ev.changedTouches);
                        if(ev.touches.length == 1) {
                            //滑动时距离浏览器左侧的距离
                            this.moveX = ev.touches[0].clientX;

                            //实时的滑动的距离-起始位置=实时移动的位置
                            this.disX = this.moveX-this.startX;
                            if(this.disX<0 || this.disX == 0) {
                                this.slideEffect = 'transform:translateX(0px)';
                            }else if(this.disX>0){
                                this.slideEffect = 'transform:translateX('+this.disX+'px)';

                                // 最大也只能等于删除按钮宽度 
                                if(this.disX>=btnWidth) {
                                    this.slideEffect = 'transform:translateX('+(btnWidth-btnImg)+'px)';
                                }
                            }
                        }
                    },
                    touchEnd:function(ev){
                        ev = ev || event;
                        ev.preventDefault();
                        let btnWidth = this.$refs.remove.offsetWidth;
                        let btnImg = this.$refs.btnImg.offsetWidth;
//                      console.log(ev.changedTouches);
                        if(ev.changedTouches.length == 1) {
                            let endX = ev.changedTouches[0].clientX;
                            this.disX = endX-this.startX;
                            console.log(this.disX,'this.disX')
                            console.log((btnWidth/2),'btnWidth/2');
                            if(this.disX < (btnWidth/2)) {
                                this.slideEffect = 'transform:translateX(0px)';
                            }else {
                                this.slideEffect = "transform:translateX("+(btnWidth-btnImg)+ "px)";
                                //让字段显示出来，或者写你需要的逻辑
                                this.isShow = true
                            }
                        }
                    }
                }
            })
            var vm = new Vue({
                el:'#box',
            })
        </script>
    </body>
</html>

刚开始我也以为touch的三个事件都有targetTouches，touches以及changedTouches对象列表，
其实不然，touchend事件中应该是只有个changedTouches触摸实例列表的，
而且这里说明一下，回调函数的event只是一个普通的object对象，
实际上event中有一个originalEvent属性，这才是真正的touch事件，
这个事件中才存在着上诉三个触摸实例列表，这三个实例存储了触摸事件的位置等等属性，类似于鼠标事件。所以貌似touchend事件中只能用changedTouches！！

希望我们所有的新手小白能一起进步~~！