zepto的各种坑
发布在H5开发2015年6月12日view:6385BrettBat移动开发
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

1、编译zepto。模块之前可能有依赖关系,整体顺序参考下面这个即可:

MODULES="zepto event ajax form ie detect fx fx_methods assets data deferred callbacks selector touch gesture stack ios3" npm run-script dist

2、支持requirejs。在

window.Zepto = Zepto
'$' in window || (window.$ = Zepto)

后增加如下代码,以便支持requirejs

if ( typeof define === "function" && define.amd ) {
    define( "zepto", [], function () { return Zepto; } );
}

3、加入如下代码,以支持微信等部分浏览器的滑动

if (touch.x2 && Math.abs(touch.x1 - touch.x2) > 10){
      e.preventDefault()
    }

在如下方法中增加

.on('touchmove MSPointerMove pointermove', function(e){
    if((_isPointerType = isPointerEventType(e, 'move')) &&
      !isPrimaryTouch(e)) return
    firstTouch = _isPointerType ? e : e.touches[0]
    cancelLongTap()
    touch.x2 = firstTouch.pageX
    touch.y2 = firstTouch.pageY

    deltaX += Math.abs(touch.x1 - touch.x2)
    deltaY += Math.abs(touch.y1 - touch.y2)

    if (touch.x2 && Math.abs(touch.x1 - touch.x2) > 10){
      e.preventDefault()
    }
  })

详情见:https://github.com/jnotnull/zepto

4、因IOS在第三方输入法下不支持onkeyup事件,所以需要使用oninput进行代替onkeyup事件

$("#user-name")[0].oninput = function() {
      that.checkusername();
    };

5、使用fastclick代替zepto的tap事件,防止出现穿透问题。

评论
发表评论
4年前
赞了此文章!
5年前
赞了此文章!
5年前
赞了此文章!
5年前

@jnotnull 期待你的一起参与哦

5年前

@JSLite.io 很乐意哈

5年前
赞了此文章!
5年前

jslite.io JSLite.io 都研究这么透彻了,一起开发 JSLite 呗

WRITTEN BY
jnotnull
专注于前端开发
TA的新浪微博
PUBLISHED IN
H5开发

介绍移动端的web开发

我的收藏