前言

最近在做一個(gè)移動(dòng)端的項(xiàng)目，其中有一個(gè)收藏列表，其中包含幾個(gè)事件。
1.點(diǎn)擊跳轉(zhuǎn)詳情頁。
2.長按顯示遮罩層和刪除按鈕
3.點(diǎn)擊刪除按鈕，刪除此項(xiàng)。
下面會(huì)詳細(xì)介紹我處理此問題時(shí)所出現(xiàn)的問題，及處理方法（本文基于jQuery）

添加長按事件

var self = this;
$(".product").on({
    touchstart: function(e){
        timeOutEvent = setTimeout(function(){
          //此處為長按事件-----在此顯示遮罩層及刪除按鈕
        },500);
    },
    touchmove: function(){
        clearTimeout(timeOutEvent);
        timeOutEvent = 0;
        e.preventDefault();
    },
    touchend: function(e){
        clearTimeout(timeOutEvent);
        if(timeOutEvent!=0){//點(diǎn)擊
          //此處為點(diǎn)擊事件----在此處添加跳轉(zhuǎn)詳情頁
        }
        return false;
    }
});

首先我對(duì)列表添加了長按事件，添加完之后，發(fā)現(xiàn)我的長按事件已經(jīng)可以成功執(zhí)行了。但是卻出現(xiàn)了新的問題：

無論是點(diǎn)擊或者長按，松開之后，都會(huì)執(zhí)行touchend里面的方法，也就是長按或者點(diǎn)擊 都會(huì)跳轉(zhuǎn)詳情頁。

這個(gè)問題好處理，只需添加一個(gè)變量，來判斷是否為長按事件

var self = this;
var longClick =0;
$(".product").on({
    touchstart: function(e){
        longClick=0;//設(shè)置初始為0
        timeOutEvent = setTimeout(function(){
            //此處為長按事件-----在此顯示遮罩層及刪除按鈕
            longClick=1;//假如長按，則設(shè)置為1
        },500);
    },
    touchmove: function(){
        clearTimeout(timeOutEvent);
        timeOutEvent = 0;
        e.preventDefault();
    },
    touchend: function(e){
        clearTimeout(timeOutEvent);
        if(timeOutEvent!=0 && longClick==0){//點(diǎn)擊
            //此處為點(diǎn)擊事件----在此處添加跳轉(zhuǎn)詳情頁
        }
        return false;
    }
});

這樣上面的問題就完美解決了。

添加刪除事件

接下來就是給遮罩層上的刪除按鈕添加事件

$('.product_del').click(function(){
    //事件處理
});

但是在這里就發(fā)現(xiàn)了新的問題

此處所寫的方法并沒有執(zhí)行，而是觸發(fā)了上面所寫的跳轉(zhuǎn)事件

所以就需要一個(gè)新的事件來覆蓋原本的事件

$('.product_del').on({
    touchstart: function(e){
    },
    touchmove: function(){
      clearTimeout(timeOutEvent);
      e.preventDefault();
    },
    touchend: function(e){
        clearTimeout(timeOutEvent);
        if(timeOutEvent!=0 ){//點(diǎn)擊
            //點(diǎn)擊事件處理
        }
        return false;
    }
});

然后，整個(gè)點(diǎn)擊跳轉(zhuǎn)，長按顯示刪除，刪除事件，就已經(jīng)完美解決了。

但是，在移動(dòng)端查看的時(shí)候就會(huì)發(fā)現(xiàn)正常的滾動(dòng)事件被preventDefault屏蔽了。

滾動(dòng)事件

此處有兩種解決方式：
1.刪除e.preventDefault();
刪除preventDefault有可能會(huì)出現(xiàn)其它情況，不過我暫時(shí)沒發(fā)現(xiàn)如果出現(xiàn)其它情況，可使用下面的方法

var touchY = 0;
var longClick =0;
$(".product").on({
    touchstart: function(e){
        longClick=0;
        timeOutEvent = setTimeout(function(){
            //此處為長按事件-----在此顯示遮罩層及刪除按鈕
            longClick=1;//假如長按，則設(shè)置為1
        },500);
        var touch = e.touches[0];
        touchY = touch.clientY;
    },
    touchmove: function(){
        clearTimeout(timeOutEvent);
        timeOutEvent = 0;
        var touch = e.touches[0]
        if(Math.abs(touch.clientY - touchY) < 10){
            e.preventDefault();
        }
    },
    touchend: function(e){
        clearTimeout(timeOutEvent);
        if(timeOutEvent!=0 && self.longClick==0){//點(diǎn)擊
           //此處為點(diǎn)擊事件----在此處添加跳轉(zhuǎn)詳情頁
        }
        return false;
    }
});

刪除的點(diǎn)擊事件也是如此

By : Yimi-shan