扫一扫分享
hammerjs是一个短小精悍的库,他可以让我们轻松的实现移动端上的手势。 hammerjs的两大优势如下:
诚然,我们可以通过touch的四个事件等来完成相同的功能,但是不可避免的会比较麻烦,所以既然前人已经造了这个好轮子,为什么不去使用呢? 另外,300ms的延迟有时是我们不需要的,比如,我们在做webapp时,不需要页面的缩放,而300ms的延迟就是为了webapp的缩放而规定的, 因此做webapp时我们就可以使用hammer-time.js来移除300ms的点击延迟。
另外,hammer.js经过压缩只有7kb,而hammer-time.js经过压缩只有1kb,所以完全不用考虑引入他们之后的性能问题,这简直太棒了!
第一步: 引入hammer.js库。
<script src="https://hammerjs.github.io/dist/hammer.js"></script>
第二步: 创建一个用于使用手势的dom元素。
<div id="myElement">good</div>
第三步: 创建一个hammer实例。
var myElement = document.getElementById('myElement');
var mc = new Hammer(myElement);
第四步: 添加一个事件,这样我们就可以知道该事件是否被触发了。
mc.on("panleft panright tap press", function(ev) {
myElement.textContent = ev.type +" gesture detected.";
});
手机预览