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庫”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！