ECOS百科全書|高級搜索|RSS訂閱|加入收藏|服務中心|聯系我們歡迎您光臨!

Ecstore移動端觸屏事件處理分析

來源:未知 發布時間:2019-04-05 01:29 字體:【   點擊

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 有興趣的可以分析查看。


------分隔線--------

關鍵詞:移動端觸屏事件

轉載請保留:http://www.pvxybj.live/html/jszx/ecstore/article-2847.html

------分隔線--------
尚未注冊暢言帳號,請到后臺注冊
尖子和八50手