zepto.js 处理Touch事件

时间:2022-10-17 17:44:00

处 理Touch事件能让你了解到用户的每一根手指的位置,在touch事件触发的时候产生,可以通过touch event handler的event对象取到,如果基于zepto.js开发,一般是通过event.touches[0]来获取属性。重要属性如 下:clientX,clientY:触摸点相对于浏览器窗口viewport的位置;pageX,pageY: 触摸点相对于页面的位置;screenX,screenY:触摸点相对于屏幕的位置 ;identifier:touch对象的unique ID

zepto.js 处理Touch事件

方法/步骤

  1. 你可以绑定以下四种Touch事件来了解基本的touch事件:

    touchstart:手指触摸屏幕上的时候触发

    touchmove:手指在屏幕上移动的时候触发

    touchend:手指从屏幕上拿起的时候触发

    touchcancel:系统取消touch事件的时候触发

  2. html:

    <div id="touch_test">

    <span class="clear">clear</span>

    <ul id="touchs">

    </ul>

    </div>

    css:

    #touchs{

    margin: 10px;width: 100px;height: auto;min-height: 100px;

    border:1px solid #c2ddb6;border-radius: 2px;background: #c2ddb6;

    }

    #touchs li {list-style: none;}

    .clear{

    margin-left: 10px;display:inline-block;height: 24px;width: 40px;color:#fff;

    font-size: 14px;line-height: 24px;background: #c2ddb6;text-align: center;

    }

    js:

    <script type="text/javascript" src="script/zepto.min.js"></script>

    <script type="text/javascript">

    ;(function($){

    $('#touchs').find('li').remove();

    $('#touchs').bind("touchstart",function(event){

    var touchpros =event.touches[0];

    console.log(touchpros);

    $('#touchs').append('<li>touchstart...</li>');

    });

    $('#touchs').bind("touchmove",function(){

    $('#touchs').append('<li>touchmove...</li>');

    });

    $('#touchs').bind("touchend",function(){

    $('#touchs').append('<li>touchend...</li>');

    });

    $('#touchs').bind("touchcancel",function(){

    $('#touchs').append('<li>touchcancel...</li>');

    });

    $('.clear').bind("click",function(){

    $('#touchs').find('li').remove();

    });

    })(Zepto);

    </script>

  3. 当你触摸屏幕并抬起手指,只触发touchstart和touched。点击clear 可以清除本次测试的数据,可以再次测试。

    zepto.js 处理Touch事件
  4. 当如果手指触摸屏幕并移动后抬起会触发touchstart,多次touchmove,touchend或touchcanel

    zepto.js 处理Touch事件
  5. 可以根据基本的touch事件来封装成你想要实现复杂的效果,比如向左或向右滑动,

    向上或向下滑动,并在滑动时封装你想实现的效果。

    打开:https://github.com/madrobby/zepto/tree/master/src;

    touch.js封装好了滑动事件的处理,将其添加到自己的项目中,就可以直接调用向右、右、上、下滑动的事件。这样zepto.js官网手册中的例子就可以正常运行了。

    zepto.js 处理Touch事件
    zepto.js 处理Touch事件