Ecstore移動前端一般在手機等觸摸屏上展現,在前端用戶UI接口與PC端不同,例如單擊事件,在PC端是鼠標Click事件,在觸摸屏上則是用戶的手指觸摸屏幕引起的單擊事件,Ecstore為處理觸屏事件,引入了zepto中的touch模塊。如常用的單擊和雙擊事件
在移動端打開商城商品列表頁,可以點擊標簽來排序和篩選商品,這里的單擊標簽就是tap事件
看一下這里處理tap事件的js代碼
$('.J-tab .trigger').on('touchend',function(e){e.preventDefault();}).on('tap',function(){ page = 1; if( $(this).hasClass('sales-seq') ){ salesSeq = salesSeq == 'buy_w_count desc' ? 'buy_w_count asc' : 'buy_w_count desc'; } else if ($(this).hasClass('price-seq')) { if(priceSeq == 'price desc'){ priceSeq = 'price asc'; $(this).find('i')[0].className = 'arr down'; }else{ priceSeq = 'price desc'; $(this).find('i')[0].className = 'arr top'; } } filterGoods($(this)); });
on(‘tap’,function(){}) 就是添加tap事件處理的代碼,touch模塊原代碼在 public/app/wap/statics/js/touch.js 有興趣的可以分析查看。