jquery移动设备上的滑动事件

原码:

$.fn.onTouchUpOrDown = function(handler_up, handler_down) {
    var element = $(this);
    var start_client_y;
    var end_client_y;
    element[0].addEventListener('touchstart', function(event) {
      start_client_y = event.touches[0].clientY;
      event.preventDefault();
    });
    element[0].addEventListener('touchend', function(event) {
      end_client_y = event.changedTouches[0].clientY
      if (end_client_y > start_client_y) {
        if (typeof(handler_down) == 'function') {
          handler_down();
        }
      }
      if (end_client_y < start_client_y) {
        if (typeof(handler_up) == 'function') {
          handler_up();
        }
      }
    });
  }

调用:

$(document.body).onTouchUpOrDown(
  function(){
     console.log('swipe up');
  },
  function(){
     console.log('swipe down');
  }
)

特别说明:

在移动设备上,如果触发了touchmove事件,touchend事件有时不会触发。需要给touchstart加上preventDefaut。看官可据此实现左滑和右滑。



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值