JS 移动端 点击长按事件冲突

要求效果：

1.点击跳转详情页。
2.长按显示遮罩层和删除按钮

添加长按事件

$(".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){//点击
          //此处为点击事件----在此处添加跳转详情页
        }
        return false;
    }
});

首先我对列表添加了长按事件，添加完之后，发现我的长按事件已经可以成功执行了。但是却出现了问题：

无论是点击或者长按，松开之后，都会执行touchend里面的方法，也就是长按或者点击 都会跳转详情页。

解决方法：添加一个变量，来判断是否为长按事件

var longClick =0;
$(".product").on({
    touchstart: function(e){
        longClick=0;//设置初始为0
        timeOutEvent = setTimeout(function(){
            //此处为长按事件-----在此显示遮罩层及删除按钮
            longClick=1;//假如长按，则设置为1
        },500);
    },
    touchmove: function(){
        clearTimeout(timeOutEvent);
        timeOutEvent = 0;
        e.preventDefault();
    },
    touchend: function(e){
        clearTimeout(timeOutEvent);
        if(timeOutEvent!=0 && longClick==0){//点击
            //此处为点击事件----在此处添加跳转详情页
        }
        return false;
    }
});