移动端

作者: 月光在心中 | 来源:发表于2017-07-19 11:41 被阅读25次

    原生事件

    因为click有300ms的延迟(用于判断是否长按),所以不建议在移动端使用click。
    移动端事件,主要有4个,代码例子:

      <script type="text/javascript">
            var box =document.querySelector(".box");
            box.addEventListener("touchstart",function(e){
                console.log(e);
                console.log("start");
            })
            box.addEventListener("touchmove",function(e){
                console.log("move");
            })
            box.addEventListener("touchend",function(e){
                console.log("end");
            })
            box.addEventListener("touchcancel",function(e){
                console.log("cancel");
            })
        </script>
    

    touches 当前进行触摸操作的touch对象数组,同时按下的几个手指。
    screenX screenY 屏幕坐标。

    可以使用console.log(e);打印touch事件。
    手机上可以使用vconsole.min.js进行调试。
    touchcancel,是系统级事件导致的中断。

    zepto

    Zepto最初是为移动端开发的库,是jQuery的轻量级替代品,因为它的API和jQuery相似,而文件更小。Zepto最大的优势是它的文件大小,只有8k多,是目前功能完备的库中最小的一个,尽管不大,Zepto所提供的工具足以满足开发程序的需要。大多数在jQuery中·常用的API和方法Zepto都有,Zepto中还有一些jQuery中没有的。另外,因为Zepto的API大部分都能和jQuery兼容,所以用起来极其容易,如果熟悉jQuery,就能很容易掌握Zepto。你可用同样的方式重用jQuery中的很多方法,也可以方面地把方法串在一起得到更简洁的代码,甚至不用看它的文档。

    touch-0.2.6.js

    这个文件是百度一个团队之前做的,现在这个库已经没有人维护了。

    0.2.6及之前的touch.js不支持事件代理机制,而新的touch.js通过手势识别,事件冒泡及原生的事件对象,提供事件代理机制和自定义事件的能力,从而极大提升性能。原有的stopPropagation会阻止原生事件冒泡,从而使手势识别失效,因此,需要手动删除/注释stopPropagation语句。麻烦各位根据自己项目的实际情况,选择性升级touch.js。

    jquery.mobile

    jQuery Mobile是jQuery 框架的一个组件(而非jquery的移动版本)。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。jQuery Mobile开发团队说:能开发这个项目,我们非常兴奋。移动Web太需要一个跨浏览器的框架,让开发人员开发出真正的移动Web网站。

    它的网站:http://jquerymobile.com/

    相关文章

      网友评论

        本文标题:移动端

        本文链接:https://www.haomeiwen.com/subject/obgkkxtx.html