您现在的位置是:首页 > 正文

js手机端、h5页面如何判断点击还是滑动

2024-02-01 02:16:42阅读 2

在手机h5端页面使用上下滑动事件实现翻页等一系列功能时,可以使用触摸结束的位置 - 触摸开始的位置判断,当结果大于0时,向上翻页,当结果小于0时向下翻页。

	document.addEventListener('touchstart',this.touchstart);
    document.addEventListener('touchend',this.touchend); 
	
	touchstart(e){
        // console.log(e.changedTouches[0].pageY,"开始时触摸的位置")
        this.start = e.changedTouches[0].pageY
    },
    touchend(e){
        console.log(this.end - this.start,"结束时触摸的位置")
        this.end = e.changedTouches[0].pageY
        
         if(this.end - this.start > 0){//结束y坐标 - 开始坐标 > 0 向上翻页 < 0向下翻页
             this.$refs.goupdown.prev() //实现的事件,这里使用的轮播图翻页事件
         }else{
             this.$refs.goupdown.next()
         }
    },

使用上方事件可以实现上下滑动事件,但运行时会出现,点击屏幕时也会触发滑动事件,还需要判断操作为点击还是滑动。
可以添加touchmove方法。

	document.addEventListener('touchstart',this.touchstart);
    document.addEventListener('touchmove',this.touchmove);//添加touchmove方法
    document.addEventListener('touchend',this.touchend); 

	touchstart(e){
	   // console.log(e.changedTouches[0].pageY,"开始时触摸的位置")
	   this.move = false //添加一个move参数,触摸时置为false
	   this.start = e.changedTouches[0].pageY
	},
	touchmove(){
	   this.move = true//触发滑动事件时move置为true
	},
	touchend(e){
	   console.log(this.end - this.start,"结束时触摸的位置")
	   this.end = e.changedTouches[0].pageY
	   if(this.move){//只有当move为true时才会触发滑动事件
	       if(this.end - this.start > 0){//结束y坐标 - 开始坐标 > 0 向上翻页 < 0向下翻页
	           this.$refs.goupdown.prev()
	       }else{
	           this.$refs.goupdown.next()
	       }
	   }else{
	       console.log("点击屏幕")
	   }
	   
	},

网站文章