移动端网页特效

m0_63400611

已于 2022-05-18 16:08:09 修改

阅读量55

点赞数

分类专栏： js 文章标签： javascript 前端 html5

于 2022-03-02 18:00:58 首次发布

本文链接：https://blog.csdn.net/m0_63400611/article/details/123234286

版权

js 专栏收录该内容

55 篇文章 2 订阅

订阅专栏

触屏事件

概述

移动端浏览器兼容性较好,不需要考虑JS的兼容性问题,可以使用原生JS书写效果,但是移动端有特殊的事件,触屏事件touch,android和IOS都有

常见的触屏事件如下:

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

触摸事件对象(TouchEvent)

TouchEvent是描述手指在触摸平面的状态变化的事件,用于秒数一个或多个触点,可以检测触点的移动,增加和减少等等

touchstart,touchmove,touchend三个时间都会有各自的事件对象

var div = document.querySelector('div');
	div.addEventListener('touchstart', function(e) {
		console.log(e);
        //touches 正在触摸屏幕的所有手指的列表
        //targetTouches 正在触摸当前DOM元素的手指列表
        //如果侦听的是一个DOM元素,他们两个是一样的
        //chengedTouches 手指状态发生了改变的列表
        //因为我们一般都是触摸元素 所以最经常使用的是targetTouches
        console.log(e.targetTouches[0]);
        //targetTouches[0]可以得到正在触摸dom元素的第一个手指的相关信息 例如坐标
	})

触摸事件对象重点有三个常见对象列表:

触摸列表	说明
touches	正在触摸屏幕的所有手指的一个列表
targetTouches	正在触摸当前DOM元素上的手指的一个列表
changedTouches	手指状态发生了改变的列表,从无到有,从有到无变化

移动端拖动元素

touchstart,touchmove,touchend可以实现拖动元素

拖动元素需要当前手指坐标值,可以使用targetTouches[0]中的pageX和pageY

原理:手指移动时,计算出手指移动距离,用盒子原来的距离+移动的距离

手指移动距离:手指滑动中的位置-手指刚开始触摸的位置

拖动元素的步骤

触摸元素touchstart:获取手指初始坐标,同时获得盒子原来的位置
移动手指touchmove:计算手指的滑动距离,并且移动盒子
离开手指touchend:

注意:手指移动会触发滚动屏幕,所以要阻止默认的屏幕滚动e.preventDefault();

代码

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>333333</title>
	<style>
		div {
			position: absolute;
			left: 0;
			width: 100px;
			height: 100px;
			background-color: pink;
		}
	</style>
    <script src="../黑马/js/animate.js"></script>
</head>

<body>
	
	<div></div>

<script>
	var div = document.querySelector('div');
	var startX = 0;//获取手指初始坐标
	var startY = 0;
	var x = 0;//获得盒子原来的位置
	var y = 0;
	
	div.addEventListener('touchstart', function(e) {
		//获取手指的初始坐标
		startX = e.targetTouches[0].pageX;
		startY = e.targetTouches[0].pageY;
		x = this.offsetLeft;
		y = this.offsetTop;
	})
	div.addEventListener('touchmove', function(e) {
		//计算手指的移动距离,手指移动之后的最表减去手指初始坐标
		var moveX = e.targetTouches[0].pageX - startX;
		var moveY = e.targetTouches[0].pageY - startY;
		//移动盒子 盒子原来的位置+手指移动的位置
		this.style.left = x + moveX + 'px';
		this.style.top = y + moveY + 'px';
		//阻止屏幕滚动的默认行为
		e.preventDefault();
	})

</script>
	
</body>
</html>

需要注意的是,div元素要设置position:absloute;和left=0;才能移动元素

click延时解决方案

延时原因

移动端click时间会有300ms的延时,原因是移动端屏幕双击会缩放(double tap to zoom)页面

解决方案

1.禁用缩放,禁用默认的双击缩放行为并且去掉300ms的点击延迟

<meta name = "viewport" content = "user-scalable = no">

2.利用touch事件自己封装这个事件解决300ms延迟

原理:

当手指触摸屏幕,记录当前触摸时间
当手指离开屏幕,用离开的时间减去触摸的时间
如果时间小于150ms并且没有滑动过屏幕,那么就定义为点击

封装tap函数

//封装tap,解决click 300ms延时
function tap (obj, callback) {
    var isMove = false;
    var startTime = 0;//记录触摸时候的时间变量
    obj.addEventListener('touchstart',function(e) {
        startTime = Date.now();//记录触摸时间
    });
    obj.addEventListener('touchmove', function(e) {
        isMove = true;//记录手指是否滑动 是则算有 不记为点击事件
    });
    obj.addEventListener('touchend', function(e) {
        //如果手指触摸和离开时间小于150ms记为点击事件
        if(!isMove && (Date.now() - startTime) < 150) {
            callback && callback();//判断是否有且执行回调函数
        }
        isMove = false;//重置参数
        startTime = 0;
    })
}

调用tap()方法

//调用封装的tap函数 事例
tap(div, function() {
    //执行代码
})

m0_63400611

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端网页特效

触屏事件概述移动端浏览器兼容性较好,不需要考虑JS的兼容性问题,可以使用原生JS书写效果,但是移动端有特殊的事件,触屏事件touch,android和IOS都有常见的触屏事件如下:触屏touch事件说明 touchstart 手指触摸到一个DOM元素时触发 touchmove 手指在一个DOM元素上滑动时触发 touchend 手指从一个DOM元素上移开时触发触摸事件对象(TouchEvent)TouchEvent是描述手指在触摸平面的状态变化
复制链接

扫一扫

专栏目录