Javascript: 关于移动端与pc的点击事件的探讨

问题1：移动端click事件会延迟响应

Solution: 移动端使用zeptojs中的tap事件来替换click

问题2： tap事件有点透的问题存在

点透：点击上一层按钮的事件，会触发下一层的点击事件或者链接

Solution: 因为tap事件的实现原理就是通过touch事件。因此，我们可以通过touch事件的结合来模拟点击事件。

Element.on('touchstart', function() {})
.on('touchmove', function() {})
.on('touchend', function() {})

上述方式类似于mousedown + mousemove + mouseup的结合使用。

当然可以直接使用touchend，但是touchend 的问题在与如果从其他区域滑动到绑定事件的元素上，然后离开，也会触发touchend，因此这里存在用户体验很奇怪的问题，所以要根据需求结合使用。

问题3： 有的时候，一个页面需要在移动端和pc端同时使用，但是不能同时绑定click与touchend，因为这样会在移动端触发两次。

Solution： 通过判断是否存在于移动端，分别绑定相应的事件

// 点击之后执行什么内容
function foo(event){};

// 判断浏览器是否是移动端
function isMobile() {
return navigator.userAgent.match(/(iphone|ipad|ipod|ios|android|mobile|blackberry|iemobile|mqqbrowser|juc|fennec|wosbrowser|browserng|Webos|symbian|windows phone)/i);
}

//封装一个tap事件
function tap(ele, callback) {
var tag = 0;
if (isMobile()) {
$(ele).on('tuochstart', function(event) {
event.preventDefault();
tag = 0;
// 如果移动了，则不算tap，这一点和click处理有一些区别
}).on('touchmove', function() {
tag = 0;
}).on('touchend', function(event) {
if (tag == 0) {
callback(event);
}
})
} else {
$(ele).on('click', function(event) {
callback(event);
})
}
}