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

这篇文章主要介绍“Hammer.js怎么实现多点触控的javascript库”，在日常操作中，相信很多人在Hammer.js怎么实现多点触控的javascript库问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”Hammer.js怎么实现多点触控的javascript库”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

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中加如一个小方块.

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

我们给它一个样式.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（手势滑动），pan，pinch（多点触控），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怎么实现多点触控的javascript库”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！