在移动端,由于点击和放大冲突的问题,所以点击会有 300ms 的延时,使用Fastclick 后,延时就消失了。
实现原理: 监听 touchend 事件,手动触发 click 事件,阻止默认的 click 事件
(function() {
var touchStartX = 0;
var touchStartY = 0;
var touchEndX = 0;
var touchEndY = 0;
document.addEventListener('touchstart', function(event) {
touchStartX = event.changedTouches[0].screenX;
touchStartY = event.changedTouches[0].screenY;
});
document.addEventListener('touchend', function(event) {
touchEndX = event.changedTouches[0].screenX;
touchEndY = event.changedTouches[0].screenY;
if (Math.abs(touchEndX - touchStartX) < 10 && Math.abs(touchEndY - touchStartY) < 10) {
event.preventDefault();
event.target.click();
}
});
})();
