码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2016-03-23 11:23:04      阅读:593      评论:0      收藏:0      [点我收藏+]

标签:

在我们滑动手机的时候,如果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);
        }
    }
}

 

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

标签:

原文地址:http://www.cnblogs.com/binmengxue/p/5310268.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!