最近做移动端的项目,涉及触摸事件很频繁;我接下来介绍下三个基本的触摸事件:
touchstart:触摸开始的时候触发
touchmove:手指在屏幕上滑动的时候触发
touchend:触摸结束的时候触发
下面是我刚写的一个小demo,可以复制体验下,测试的话打开浏览器的开发者工具的手机模式,点击屏幕移动就能体验到了,滚动鼠标是无效的哦~
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ss</title>
<style>.sb{width: 100%;height: 200px;background-color: red}</style>
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div style="height: 3000px">
<div class="sb" ></div>
</div>
<script>
//touchmove 手指不放发生
$('body').on('touchmove',function(){
$('.sb').css({'display':'none'}) //隐藏div
})
//touchend 手指放开发生
$('body').on('touchend',function(){
$('.sb').css({'display':'initial','position':'fixed'}) //显示,固定div
})
</script>
</body>
</html>
好了,有2个了,touchstart 不用解释了吧,相信以你们的智慧秒懂;有问题下方留言,共同交流,刚实习的新手一个
来源:https://www.cnblogs.com/lqzweb/p/6417172.html