移动端touch事件

最新推荐文章于 2023-06-28 21:31:40 发布

weixin_44740410

最新推荐文章于 2023-06-28 21:31:40 发布

阅读量276

点赞数

本文链接：https://blog.csdn.net/weixin_44740410/article/details/90244263

版权

1)touch事件:touch,触摸,是移动端的触摸事件,是一组事件
1.touchstart:当手指触摸到屏幕的时候触发--只会触发一次
2.touchmove:当手指在屏幕中滑动时触发---一直触发
3.touchend:当手指离开屏幕时触发---只会触发一次
4.touchcancel:被迫中止滑动时触发---当来电弹出消息
2)移动端添加事件的方式:addEventListener(事件类型,function(){},false)
3)事件参数对象e:名字:touchlist(触目点集合,一个手指就是一个触摸点,屏膜接触的点的个数)
1.changedTouches:改变后的触摸点集合
2.targetTouches:当前元素的触发点集合
3.touches:页面中所有触摸点的集合
4)每一个事件都可以记录触摸点,特例touchend事件:targetTouches和touches不会被记录
5)clientX,clientY:基于浏览器窗口(视口)
pageX,pageY:基于页面(视口)
screenX,screenY:基于屏幕

-----滑动:滑动的原理:让触摸的元素随着手指的滑动位置的改变
1.移动端的点击事件:click事件,一般不用,因为移动端为了滑动和点击,click事件会延迟300ms
* 这样会影响用户体验,响应太慢了
* 2.解决方案
* 1)使用tap事件,tap轻击
1.1 说明:tap事件不是移动端的原生事件,而是通过touch事件衍生而来的
1.2 zepto.js:轻量级的jquery库,里面封装了tap事件
1.3tap事件的条件:1.响应速度要比click快响应速度小于150毫秒
2.不能滑动(不能触发touchmove事件)
2)使用fastclick.js提高了移动端click响应速度
fastclick.js:一个插件,先下载再使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" user-scalable="0">
<title>Title</title>
<style>
.box{
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
window.οnlοad=function () {
//移动端的手势事件:向左/右/上/下
//实现左右滑动
var bindSwipeEvent=function (dom,leftcallback,rightcallback) {
//1.触摸事件
//2.滑动事件:必须要滑动过(touchmove事件必须触发)滑动的距离至少50px
var isMove=false;//默认没有滑动
var startX=0;
var distanceX=0;
dom.addEventListener('touchstart',function (e) {
//记录起始触摸点
var 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){
//滑动
//
if (distanceX>0){
rightcallback&&rightcallback.call(this,e);
} else{
leftcallback&&leftcallback.call(this,e);
}
}
isMove=false;
startX=0;
distanceX=0
})
}
bindSwipeEvent(document.querySelector('.box'),function (e) {
console.log(this);
console.log('左滑动');

},function (e) {

console.log('右滑动');
});
}
</script>
</body>
</html>

weixin_44740410

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
移动端touch事件

1)touch事件:touch,触摸,是移动端的触摸事件,是一组事件1.touchstart:当手指触摸到屏幕的时候触发--只会触发一次2.touchmove:当手指在屏幕中滑动时触发---一直触发3.touchend:当手指离开屏幕时触发---只会触发一次4.touchcancel:被迫中止滑动时触发---当来电弹出消息2)移动端添加事件的方式:addEventListener(事...
复制链接

扫一扫