jquery 手机触摸事件

最新推荐文章于 2022-11-08 14:58:00 发布

weixin_30548917

最新推荐文章于 2022-11-08 14:58:00 发布

阅读量167

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/lqzweb/p/6417172.html

版权

最近做移动端的项目，涉及触摸事件很频繁；我接下来介绍下三个基本的触摸事件：

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>