天天看點

移動端上下左右滑動事件

注意:要用on方法

$(".activity_goods").on("touchstart",'.activity_goods_left',function(e) {

            if (e.cancelable) {

                if (!e.defaultPrevented) {

                    e.preventDefault();

                }

            }   

            startX = e.originalEvent.changedTouches[0].pageX,

            startY = e.originalEvent.changedTouches[0].pageY;

        });

        $(".activity_goods").on("touchend", '.activity_goods_left',function(e) {       

            if (e.cancelable) {

                if (!e.defaultPrevented) {

                    e.preventDefault();

                }

            }               

            moveEndX = e.originalEvent.changedTouches[0].pageX,

            moveEndY = e.originalEvent.changedTouches[0].pageY,

            X = moveEndX - startX,

            Y = moveEndY - startY;

            // 左滑

            if (X<0) {

                let zix = $('.collection2_delete').width()-5;

                $(this).css('margin-left',-zix)

                $(this).siblings('.collection2_delete').show()                

            }

            // 右滑

            else if (X>0) {

                $(this).css('margin-left',0)

                $(this).siblings('.collection2_delete').hide()

            }

            // 上滑

            else if (Y<0) {return}

            // 下滑

            else if (Y>0) {return}

            // 點選

            else{return}

        });

繼續閱讀