移动端上下左右滑动事件

最新推荐文章于 2024-08-25 22:41:00 发布

wangle_style

最新推荐文章于 2024-08-25 22:41:00 发布

阅读量2k

点赞数

分类专栏：日常开发

本文链接：https://blog.csdn.net/wangle_style/article/details/82116348

版权

日常开发专栏收录该内容

42 篇文章 0 订阅

订阅专栏

注意：要用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}
       });