关闭

jquery移动设备上的滑动事件

标签: 移动webjavascriptjquery移动设备前端
203人阅读 评论(0) 收藏 举报
分类:

原码:

$.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

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:60874次
    • 积分:1422
    • 等级:
    • 排名:千里之外
    • 原创:83篇
    • 转载:15篇
    • 译文:0篇
    • 评论:0条
    文章分类