手机端touchstart,touchmove,touchend事件，优化用户划入某个可以点击LI的效果

Posted 2020-06-27 归尘2016

在我们滑动手机的时候，如果LI或者DIV标签可以点击，那么在移动端给用户一个效果

/*id为添加效果LI上的UL的ID，或者是当前DIV的ID*/
function doTouchPublic(id){
    setTimeout(function(){
        var obj=document.getElementById(id);
            touchPublic.tagUltagDiv(obj);
    },300);    
};
var touchPublic={
    tagUltagDiv:function(obj){
        var objAll;
               /*如果对象为UL，那么给LI添加事件，否则给DIV当前对象添加事件*/
        if(obj.tagName=="UL"){
            objAll=obj.childNodes;
        }else{
            objAll=obj;
        }
        touchPublic.touchMoveEndIf(objAll);
    },
    /*li做委托事件,on为JQ中委托事件*/
    touchMoveEndIf:function(obj){
            
            $(obj).on(‘touchstart‘,function(){
                touchPublic.touchObjstart(this,"objRowOver");
            })
            /*触摸滑动，e.preventDefault();是为了让end触发*/
            $(obj).on(‘touchmove‘,function(){
                touchPublic.touchObjend(this,"objRowOver");
            });
            /*触摸离开*/
            $(obj).on(‘touchend‘,function(){
                touchPublic.touchObjend(this,"objRowOver");
            });
        
    },
    touchObjstart:function(that,color){
        $(that).addClass(color);
    },
    touchObjend:function(that,color){
        if($(that).attr(‘class‘)==color){
            $(that).removeClass(color);
        }
    }
}