Record an experience using zepto.mdatetimer.js:
All tap events are used in mdatetimer. Since we introduced fastclick, we need to convert tap events into click events. The details are as follows:
Mobile terminal development event definition tap click (there will be a delay of 200-300ms)
1 Define directly as tap event
2 Define click event Introduce fastclick js lib
Defined as a tap event The introduction of fastclick will cause conflicts, causing the middle part of the input to fail to respond to the event. The label part in front of the input can respond to the click event and it is not very stable
Reprinted:
http://blog.csdn.net/sly94/article/details/51701188
There will be penetration problems when using the tap on the mobile terminal
One: click and tap comparison
Both click and tap will trigger click events, but on the mobile web side, click will have a delay of 200-300ms, so tap is generally used instead of click as the click event. singleTap and doubleTap represent single tap and double tap respectively
Two: tap penetration processing
Use the click event of the tap of the zepto framework to avoid the delayed response of the click event, and penetration will occur, that is, the click will trigger the click event of the non-current layer.
Three: The reason for penetration
Question: After clicking q in html5, the pop-up box of b pops up
Because the tap event is implemented by binding the touchstart and touchend events in the document, on $('.q'), when the touchend event bubbles to the document, execute $(this).hide(); at this time $('.b '), at the top of the page
Now touchend bubbles up to the document, and $('.b') is at the front of the page, and the click event is fired
Four: Solve the penetration problem
1.github上有一个叫做fastclick的库，它能规避移动设备上click事件的延迟响应https://github.com/ftlabs/fastclick将它用script标签引入页面(该库支持AMD，可按照AMD规范，用require.js的模块加载器引入)，并且在dom ready时初始化在body上，如：
$(function(){
new FastClick(document.body);
})
然后给需要“无延迟点击”的元素绑定click事件（注意不再是绑定zepto的tap事件）即可。
也可以不在body上初始化它，而在某个dom上初始化，这样，只有设个dom和它的子元素才能享受"无延迟"的点击
实践开发中，当元素绑定fastclick后，click响应速度比tap还要快一点。
2.为元素绑定touchend事件，并在内部加上e.preventDefault();
$demo.on('touchend',function(e){
//改变了事件名称，tap是body上才被触发，而touchend是原生的事件，在dom本身上就会被捕获触发
$demo.hide();
e.preventDefault();//阻止“默认行为”
});
五：touch事件
touch是针对触屏手机上的触摸事件。现金大多数触屏手机webkit内核提供了touch事件的监听
包含：touchstart touchmove touchend touchcancel四个事件
touchstart touchmove touchend事件可以类比于mousedown mouseover mouseup的触发