zepto其他事件模块的添加

秒速五厘米 2022-02-02 05:57 172阅读 0赞

# 转自：https://www.jianshu.com/p/fb718d6f3835 #

# zepto #

*  github地址: [https://github.com/madrobby/zepto][https_github.com_madrobby_zepto]
 *  官方地址: [http://zeptojs.com/][http_zeptojs.com]
 *  中文版地址: [http://www.css88.com/doc/zeptojs\_api/][http_www.css88.com_doc_zeptojs_api]
 *  Zepto就是jQuery的移动端版本, 可以看做是一个轻量级的jQuery
 *  注意点:
    
     *  Zepto的设计目的是提供 jQuery 的类似的API，但并不是100%覆盖 jQuery
     *  jQuery的底层是通过DOM来实现效果的， zepto.js 是用css3 来实现的；
     *  官网下载的zepto,就已经包含了官网所述的默认模块了
     *  github上下载的zepto模块需要自己导入

<script src="js/zepto.js"></script>
    
    <script src="js/event.js"></script>
    
    <script src="js/fx.js"></script>
    
    <script src="js/fx_methods.js"></script>

zepto点击事件

*  由于移动端的手势多而且分单击双击,所以移动端的click事件有300ms左右的延迟,所以移动端的点击事件用tab

$("div").tap(function(){
            ......
    })

zepto中touch相关事件

touchstart

*  touchstart是手指刚触摸到元素时触发的事件

touchmove

*  touchmove是手指移动时触发的事件

touchend

*  当手指离开指定元素时触发

注意点

*  添加以上三个事件的时候用addEventListener
 *  以上三个事件对pc端无效

zepto中touch事件的对象

touches:

*  保存了屏幕上所有手指的列表

targetTouches

*  保存了元素上所有手指的列表

changedTouches

*  包含了刚刚与屏幕接触的手指或者刚刚离开屏幕的手指

TouchEvent {isTrusted: true, touches: TouchList, targetTouches: TouchList, changedTouches: TouchList}

zepto中touch事件的XY

*  client: 可视区域
 *  page: 内容

var oDiv = document.querySelector("div");
        /*
        1.注意点:
        无论是event对象中的touches/targetTouches/changedTouches都是一个伪数组
        所以我们想要获取手指位置的时候, 需要从伪数组中取出需要获取的那个手指对象
         */
        oDiv.addEventListener("touchstart", function (event) {
            // 获取手指距离屏幕左上角的位置
            // console.log(event.targetTouches[0].screenX);
            // console.log(event.targetTouches[0].screenY);
    
            // 获取相对于当前视口的距离
            console.log("clientX", event.targetTouches[0].clientX);
            console.log("clientY", event.targetTouches[0].clientY);
    
            /*
            clientX 10
            clientY 8
            pageX 1156
            pageY 8
             */
            // 获取相对于当前页面内容的距离
            console.log("pageX", event.targetTouches[0].pageX);
            console.log("pageY", event.targetTouches[0].pageY);
        });

### 简单案例: 物块拖拽 ###

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>08-touch事件练习</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            div{
                width: 100px;
                height: 100px;
                background: red;
            }
        </style>
    </head>
    <body>
    <div></div>
    <script>
        var oDiv = document.querySelector("div");
        var startX, startY, moveX, moveY;
        // 1.监听手指按下事件
        oDiv.addEventListener("touchstart", function (event) {
            // 记录手指按下的位置
            startX = event.targetTouches[0].clientX;
            startY = event.targetTouches[0].clientY;
        });
        // 2.监听手指一动事件
        oDiv.addEventListener("touchmove", function (event) {
            // 记录手指移动之后的位置
            moveX = event.targetTouches[0].clientX;
            moveY = event.targetTouches[0].clientY;
            // 计算两个位置之间相差的距离, 相差的距离就是需要移动的距离
            var offsetX = moveX - startX;
            var offsetY = moveY- startY;
            // 让div移动起来
            oDiv.style.transform = "translate("+offsetX+"px,"+offsetY+"px)";
        });
    </script>
    </body>
    </html>

--------------------

# zepto中touch事件的点透问题 #

*  如果两个元素是重叠的(一个在另一个上面), 并且上面一个监听了touchstart事件, 下面一个监听了click事件,那么如果上面一个元素触发touchstart事件之后消失了, 那么就会出现点透问题

解决方案: fastclick框架

*  注意点: 框架必须在前面调用, 并且所有的元素都被注册了fastclick中的事件, 以后所有的click事件都是fastclick的click事件

--------------------

# zepto中的swipe事件 #

*  手指在元素上滑动触发的事件

$("div").swipeLeft(function () {
            // console.log("左滑动");
            $(this).animate({left: "0px"}, 1000);
        });
        $("div").swipeRight(function () {
            // console.log("右滑动");
            $(this).animate({left: "100px"}, 1000);
        });
        $("div").swipeUp(function () {
            // console.log("上滑动");
            $(this).animate({top: "0px"}, 1000);
        });
        $("div").swipeDown(function () {
            // console.log("下滑动");
            $(this).animate({top: "100px"}, 1000);

移动端hover事件

*  移动端只能使用mouseenter和mouseleave来监听移入和移出

--------------------

# iscroll框架 #

*  当我们做移动端侧边栏的时候, 自己实现可能会出现bug也可能比较麻烦,这时候可以用iscroll框架
 *  github地址: [https://github.com/cubiq/iscroll][https_github.com_cubiq_iscroll]
 *  实现步骤:
    
     *  按照框架的需要搭建一个三层的结构
     *  引入iscroll.js框架
     *  创建一个IScroll对象, 把需要滚动的容器给它

--------------------

# swiper框架 #

*  Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。
 *  Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。
 *  Swiper开源、免费、稳定、使用简单、功能强大，是架构移动终端网站的重要选择！
 *  如何使用:
    
     *  引入对应的css和js文件
     *  按照框架的需求搭建三层结构
     *  创建一个Swiper对象, 将容器元素传递给它,第二个参数接收一个对象

<div class="test">
        <ul class="swiper-wrapper">
            <li class="swiper-slide">slider1</li>
            <li class="swiper-slide">slider2</li>
            <li class="swiper-slide">slider3</li>
        </ul>
    </div>
    <script>
        var mySwiper = new Swiper('.test',{
            loop: true,
            autoplay: true,
            // 如果需要分页器
            pagination: {
                el: '.swiper-pagination',
            },
            // 如果需要前进后退按钮
            navigation: {
                nextEl: '.swiper-button-next',
                prevEl: '.swiper-button-prev',
            },
            // 如果需要滚动条
            scrollbar: {
                el: '.swiper-scrollbar',
            },);
    </script>

[https_github.com_madrobby_zepto]: https://github.com/madrobby/zepto
[http_zeptojs.com]: http://zeptojs.com/
[http_www.css88.com_doc_zeptojs_api]: http://www.css88.com/doc/zeptojs_api/
[https_github.com_cubiq_iscroll]: https://github.com/cubiq/iscroll