<!doctype html>
<head>
<meta charset="utf-8" />
<title>zepto延迟</title>
<script src="http://zeptojs.com/zepto.js"></script>
<style type="text/css">
.div1{
background: red;
width: 400px;
height: 400px;
}
.div2{
width: 400px;
height: 400px;
border: 1px solid black;
}
.div3{
background: blue;
width: 400px;
height: 400px;
}
.div4{
width: 400px;
height: 400px;
border: 1px solid black;
}
.div5{
background: yellow;
width: 400px;
height: 400px;
position: relative;
}
.div6{
width: 400px;
height: 400px;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
<script>
$('.div1').on('click',function(){
$('.div2').text("这个是有延迟的click");
});
$('.div3').on('touchstart',function(){
$('.div4').text("这个是无延迟的touchstart");
});
$('.div5').on('touchstart',function(){
$('.div6').text("你的手指放上来了");
});
$('.div5').on('touchend',function(){
$('.div6').text("你的手指离开了");
});
$('.div5').on('click',function(){
$('.div6').text("我被点击了");
})
//在手机中测试会比较明显,click会延迟300ms,而touch不会。。。产生原因是因为zepto双
//击的时候会在移动端页面会放大,你可以试下在手机中双击第一块,会发现放大后第二块才出
//现字体,而第三块双击,会在第四块上同时出现字体。这就是坑一
//点击第五块,会发现第六块先出现 手指放上去了-》手指离开了-》被点击了
//但是如果,你点击第五块过了300ms才离开,那就只显示 手指放上去-》 手指离开了。
//如果你在ios中的safari中测试,会更明显看到touchend后会触发click
//这就是所谓的产生延迟300ms,zepto在写touch的时候会有个300ms判断,超过了300ms才算touch,否则算点击,
//这是因为双击放大的原因,这300ms就是为双击放大预留的,解决办法有几种,用tap代替click,或者写阻止实践。
</script>
</body>
zepto延迟300s
最新推荐文章于 2018-03-17 23:54:44 发布