引言
在网页应用中，手势操作已成为一种不可或缺的功能。而 HammerJS 库是一个较为流行的手势操作库，但它只能在特定的元素上绑定手势事件，无法在元素之间传递手势事件。而 Propagating HammerJS 插件则恰好满足了这一需求，即在子元素处理手势事件的同时能够将手势事件向上传递给祖先元素。本文将详细介绍如何使用 propagating-hammerjs npm 包。
安装与引入
使用 npm 进行安装：
npm install propagating-hammerjs
在项目中引入 HammerJS 和 propagating-hammerjs：
import Hammer from 'hammerjs'; import 'propagating-hammerjs';
使用
在普通的 HammerJS 中，我们通常是这样绑定手势事件的：
const element = document.getElementById('myElement'); const mc = new Hammer.Manager(element); const tap = new Hammer.Tap(); mc.add(tap); mc.on('tap', (event) => { console.log(event.target); });
而在使用 Propagating HammerJS 时，我们只需要在 Hammer 对象上调用 propagateTo 方法并传入一个元素列表，即可实现手势事件在指定的元素列表之间传递：
const element1 = document.getElementById('myElement1'); const element2 = document.getElementById('myElement2'); const tap = new Hammer.Tap(); Hammer(element1).propagateTo([element2]).on('tap', (event) => { console.log(event.target); });
其中， event.target 是触发手势事件的最底层元素；如果我们需要在手势事件的目标元素上处理事件，可以引入 propagateTo 的选项参数并设置为 false：
Hammer(element1).propagateTo([element2], { stopPropagation: false }).on('tap', (event) => { console.log(event.target); });
案例
假设我们有一个页面，其中有一个可滑动的列表和一个固定定位的按钮。此时，我们希望在用户在列表项上左右滑动时移动该列表，同时在用户在按钮上左右滑动时切换到下一个页面。利用 Propagating HammerJS，我们可以这样实现：
<div id="container"> <ul id="list"> <li>第一项</li> <li>第二项</li> <li>第三项</li> </ul> <button id="next">下一页</button> </div>
-- -------------------- ---- ------- ----- --------- - ------------------------------------- ----- ---- - -------------------------------- ----- ---- - -------------------------------- -- ---- ----- --- - --- --------------------- ----------- ------------ ---------- --------------------------- ---- ---------------------- ------- -- - -------------------- - -------------------------------- ----------------------- --- -- ---- ----- --- - --- --------------------- ----------- ------------ ---------- --------------------------- ---- ----------------------------------------------- ------- -- - -- ------------- - ----- - ------------------- - ---- -- ------------- - ---- - ------------------- - ---展开代码
结语
Propagating HammerJS 插件的使用非常简单，但却能发挥出强大的效果，极大地扩展了手势操作库的应用范围。我们可以利用 Propagating HammerJS 实现更优秀的用户体验，为用户带来更好的 Web 应用体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/170262
