search

OhNaNaSun / myapp

from todo
3 stars 0 forks source link

JS—触摸事件、手势事件 #1

Open OhNaNaSun opened 8 years ago

OhNaNaSun commented 8 years ago

hammer.js

示例：http://codepen.io/XC-Zhang/pen/ZQgwpe 官网：http://hammerjs.github.io/ github:https://github.com/hammerjs/hammer.js

OhNaNaSun commented 8 years ago

手势事件

系统级别的触摸API只有 touchstart / touchmove / touchend/touchcancel, 和鼠标事件不同的是，touch事件一次可以包含多个touches的信息https://developer.mozilla.org/zh-CN/docs/Web/API/TouchEvent 。【总】以上四个，是w3c提供的触摸事件，只针对触摸设备，最常用的是前三个。 由于触摸会导致屏幕动来动去，所以可以会在这些事件的事件处理函数内使用event.preventDefault()，来阻止屏幕的默认滚动。 其他高级一些的手势判别，例如pinch, zoom, pan 都是在这三个事件的基础上组合出来的。可以看看 Hammer.JS - Hammer.js 的实现。

如果要想判断左滑右滑这种,上面提到的 http://hammerjs.github.io绝对远超需求,如果并不需要那么多事件,用Touch.js也就够了http://touch.code.baidu.com/

OhNaNaSun commented 8 years ago

监听滚动停止

一：使用jquerymobile 的 scrollStop事件

    $(document.body).on("scrollstop", function(){
          $("#scrollTopX").html("滚动停止时，滚动的距离scrolltop为： " + $(window).scrollTop())
     })

二：使用zepto 的 scroll事件 及 函数节流

var $win = $(window);
var timer;
$win.on("scroll",function(){
      if(timer) clearTimeout(timer)
      timer = setTimeout(function(){
          $("#scrollTopX").html("滚动停止时，滚动的距离scrolltop为： " + $(window).scrollTop())
      },200)
})
OhNaNaSun commented 8 years ago

iNoBounce

Stop your iOS webapp from bouncing around when scrolling github:https://github.com/lazd/iNoBounce 禁掉回弹，就可以做页面的下拉刷新啦~