使用 Zepto.js 过程中碰到的问题及解决方案

10年服务1亿前端开发工程师

在移动端开发应用时,Zepto.js 被广泛应用。 Zepto.js 提供 jQuery 的类似的 API 但是体积远远小于 jQuery 。但是在使用过程中你可能会碰到一些问题,本文做了详细的总结,供你参考。

首先推荐一下 Zepto.js API 中文文档 (1.2.0)

问题1:判断当前对象是否是Zepto实例化对象的方法

在 jQuery 中,判断是不是 jQuery 实例化对象,直接用 instanceof 就行,即:

var a=$("body");
if(a instanceof jQuery){
    //...  
}

在 Zepto 中这样用是无效的,一般 Zepto 是如下来判断的即:

var a=$("body");
if(Zepto.zepto.isZ(a)){
    //...
}

问题2:Zepto 中不存在的方法

Zepto 并没有 100% 覆盖 jQuery,例如 nextAll(), prevAll() 这些方法在 Zepto 中不存在

问题3:Zepto.js 中的点透问题

案例如下:

<div id="css88">点头事件测试</div>

<a href="">www.css88.com</a>

div 是绝对定位的蒙层,并且 z-index 高于 a。而 a 标签是页面中的一个链接,我们给 div 绑定 tap 事件:

$('#css88').on('tap',function(){
  $('#css88').hide();
});

我们点击蒙层时 div 正常消失,但是当我们在 a 标签上点击蒙层时,发现 a 链接被触发,这就是所谓的点透事件。

原因:

touchstart 早于 touchend 早于 click。 亦即click的触发是有延迟的,这个时间大概在300ms左右,也就是说我们tap触发之后蒙层隐藏, 此时 click 还没有触发,300ms之后由于蒙层隐藏,我们的click触发到了下面的a链接上。

解决:

  1. 尽量都使用 touch 事件来替换 click 事件。例如用 touchend 事件(推荐)。
  2. 用fastclick,https://github.com/ftlabs/fastclick
  3. 用preventDefault阻止a标签的click
  4. 延迟一定的时间(300ms+)来处理事件 (不推荐)
  5. 以上一般都能解决,实在不行就换成click事件。

下面介绍一下 touchend 事件,如下:

$("#css88").on("touchend", function (event) {
    event.preventDefault();
});

问题4:移动端点击300ms延迟

300ms尚可接受,不过因为300ms产生的问题,我们必须要解决。300ms导致用户体验并不是很好,解决这个问题,我们一般在移动端用tap事件来取代click事件。

推荐两个js,一个是 fastclick,一个是 tap.js

问题5:Zepto 对象 不能自定义事件

例如执行:

$({}).bind('haorooms', function(){});

结果: TypeError: Object has no method ‘addEventListener’

解决办法是创建一个脱离文档流的节点作为事件对象: 例如:

$('').bind('haorooms', function(){});

问题6:Zepto 获取select元素的选中 option

获取select元素的选中 option ,可以用$(‘option[selected]’),但是不能用$(‘option:selected’)。

测试发现jQuery可以用 $(‘option:selected’) 获取选中的选项,但是zepto会报错! 会报如下错误:

Uncaught DOMException: Failed to execute ‘querySelectorAll’ on ‘Document’: ‘option:selected’ is not a valid selector.

但是获取有select中含有disabled属性的元素可以用 $(this).find(“option:not(:disabled)”) 因为disabled是标准属性

另外:zepto 在操作 Dom 的 selected 和 checked 属性时尽量使用 prop 方法

问题7:Zepto 的选择器表达式: [name=value] 中value 必须用 双引号 ” or 单引号 ‘ 括起来

例如执行:

$('[data-userid=haorooms]')

结果:Error: SyntaxError: DOM Exception 12

解决办法:

$('[data-userid="haorooms]"') or $("[data-userid='haorooms']")

问题8:隐藏元素尺寸

Zepto.js: 无法获取宽高;jQuery: 可以获取。

问题9:innerWidth(), innerHeight(),outerWidth(),outerHeight()

Zepto 是根据标准浏览器写的,所以对于节点尺寸的方法只提供 width() 和 height(),省去了 innerWidth(), innerHeight(),outerWidth(),outerHeight()

赞(1) 打赏
未经允许不得转载:WEB前端开发 » 使用 Zepto.js 过程中碰到的问题及解决方案

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏