移动端的事件库

最新推荐文章于 2021-10-30 09:46:28 发布

cssshua

最新推荐文章于 2021-10-30 09:46:28 发布

阅读量896

点赞数

分类专栏：移动端文章标签：移动端事件库

本文链接：https://blog.csdn.net/cssshua/article/details/78011956

版权

移动端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

FastClick.js：解决click事件300ms的延迟

touch.js：百度云手势事件库

GitHub地址：https://github.com/Clouda-team/touch.code.baidu.com

实战touch.js

首先要引入touch.js

再实现事件的绑定

<body>  
<div class="box"></div>  
<script type="text/javascript" src="js/touch-0.2.14.min.js"></script>  
<script type="text/javascript">  
    var box = document.querySelector('.box');  
//    当单击屏幕，顺时针旋转360度  
    touch.on(box, 'tap', function (ev) {  
        this.style.webkitTransitionDuration = '1s';  
        this.style.webkitTransform = 'rotate(360deg)';  
        var timer = window.setTimeout(function () {  
            this.style.webkitTransitionDuration = '0s';  
            this.style.webkitTransform = 'rotate(0deg)';  
            window.clearTimeout(timer);  
        }.bind(this),1000);  
    });  
//    当双击屏幕，逆时针旋转360度  
    touch.on(box, 'doubletap',function (ev) {  
       this.style.webkitTransitionDuration = '1s';  
       this.style.webkitTransform = 'rotate(-360deg)';  
       var timer = window.setTimeout(function () {  
           this.style.webkitTransitionDuration = '0s';  
           this.style.webkitTransform = 'rotate(0deg)';  
           window.clearTimeout(timer);  
       }.bind(this),1000);  
    });  
//    当长按和滑动的时候，盒子的背景颜色变红  
    touch.on(box,'hold swipe',function (ev) {  
        this.style.backgroundColor = 'red';  
    })  
</script>  
</body>

hammer.js：多点触控插件。官网：http://hammerjs.github.io/

hammer.js在使用时非常简单，代码示例如下：

<div id="test" class="test"></div>  
<script type="text/javascript">  
     //创建一个新的hammer对象并且在初始化时指定要处理的dom元素  
     var hammertime = new Hammer(document.getElementById("test"));  
     //为该dom元素指定触屏移动事件  
     hammertime.on("pan", function (ev) {  
          //控制台输出  
          console.log(ev);  
     });  
</script>

Zepto.js：被誉为移动端的小型jQuery

GitHub地址：https://github.com/madrobby/zepto

api文档地址：http://www.css88.com/doc/zeptojs_api/

jQuery由于是在PC端使用的，所以代码中包含了大量的对于IE低版本的兼容处理，而zepto值应用于移动端开发，所以在jQuery的基础上没有对低版本的IE进行支持

jQuery中提供了很多的选择器类型及DOM操作方法，但是zepto中只是实现了部分常用的选择器和方法，例如：jQuery中的动画方法有animate，show，hide，toggle，fadeIn，fadeOut，fadeToggle，slideUp，slideDown，slideToggle...但是zepto中只有animate

所以，zepto的源代码比jQuery小很多。

zepto专门为移动端开发而诞生，所以相对于jQuery来说更适合移动端、

zepto的animate动画方法支持了CSS3动画的操作

zepto专门准备了移动端常用的事件操作：tap点击，singleTap单击，doubleTap双击，longTap长按，sswipe滑动，swipeUp上滑，swipeDown下滑，swipeLeft左滑，swipeRight右滑....

<script type="text/javascript" src="js/zepto.min.js"></script>  
<script type="text/javascript">  
    $('.box').singleTap(function (ev) {  
        $(this).animate({  
            rotate: '360deg'  
        }, 1000, 'linear', function () {  
            this.style.webkitTransform = 'rotate(0deg)';  
        })  
    }).on('touchstart', function () {  
        $(this).css('background', 'red');  
    });  
</script>

cssshua

关注

0
点赞
踩
2

收藏

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

FastClick.js：解决click事件300ms的延迟touch.js：百度云手势事件库 GitHub地址：https://github.com/Clouda-team/touch.code.baidu.com
复制链接

扫一扫

专栏目录