Hammer.js实现多点触控的javascript库

2018年03月30日 21:30helloweba.net 作者:月光光 标签:JavaScript  HTML5  移动端 

Hammer.js是一个开源的能实现多点触控的javascript库,可以识别触摸,鼠标点击和手势滑动操作,它不依赖任何第三方库,并且非常小巧灵活。

安装

使用npm安装:

npm install --save hammerjs

使用CDN或者直接下载到本地:

<script src="https://cdn.bootcss.com/hammer.js/2.0.8/hammer.min.js"></script>

使用

假设我们要操作的目标是一个小方块,我们在html中加如一个小方块.

<div class="square" id="pressme">按住我</div>

我们给它一个样式.square,并且在触发事件的时候,让小方块放大2倍.expand

.square {
  width: 90px;
  height: 90px;
  background-color: #689F38;
  transition: transform 300ms ease-out;
  color: #fff;
  line-height: 90px;
  text-align: center;
  margin-top: 20px;
}
.expand {
  transform: scale(2);
}

接下来我们使用hammer.js,当我们在小方块上按住(鼠标左键)或者在手机上按住你的手指头,小方块会放大,具体代码是这样的:

// 获取小方块id元素
var pressme = document.querySelector('#pressme');

// 创建一个新的实例
var hammer = new Hammer(pressme);

// 按住press,响应效果
hammer.on('press', function(e) {
  e.target.classList.toggle('expand');
  console.log("You're pressing me!");
  console.log(e);
});

你会发现小方块放大了,而控制台也会输出相关信息。Hammer.js还支持tap(轻触),doubletap(双击),swipe(手势滑动),panpinch(多点触控),rotate (旋转)等事件操作。

如果你想识别自己的手势,比如tripletap(三点触控),那么你必须使用这些步骤:

//获取目标元素
var square = document.querySelector('.square');

// 创建一个管理器来管理元素。
var manager = new Hammer.Manager(square);

// 创建一个识别器。
var TripleTap = new Hammer.Tap({
  event: 'tripletap',
  taps: 3
});

// 将识别器添加到管理器
manager.add(TripleTap);

// 触发事件
manager.on('tripletap', function(e) {
  e.target.classList.toggle('expand');
  console.log("You're triple tapping me!");
  console.log(e);
});

以下代码是手势左右滑动的效果。

var swipeme = document.querySelector('#swipeme');
var manager = new Hammer.Manager(swipeme);

var Swipe = new Hammer.Swipe();

manager.add(Swipe);

var deltaX = 0;
var deltaY = 0;

manager.on('swipe', function(e) {
  deltaX = deltaX + e.deltaX;
  var direction = e.offsetDirection;
  var translate3d = 'translate3d(' + deltaX + 'px, 0, 0)';
  
  if (direction === 4 || direction === 2) {  // 2和4表示左右,8和16表示上下
    e.target.innerText = deltaX;
    e.target.style.transform = translate3d;
  }
});

注意,在移动端,viewport meta 标签也是被推荐加上去的,通过禁用双击/多点触控给我们对页面更多的控制权。很多支持触摸事件的现代浏览器是不需要这个的。

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

更多有关hammer.js的使用请参考项目在github上的地址:https://github.com/hammerjs/hammer.js

声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/537.html

0条评论