# propagating-hammerjs **Repository Path**: mirrors_josdejong/propagating-hammerjs ## Basic Information - **Project Name**: propagating-hammerjs - **Description**: Extend hammer.js with event propagation - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-08-09 - **Last Updated**: 2026-02-07 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # propagating-hammerjs Extend [hammer.js](https://hammerjs.github.io/) (v2) with event propagation. We use the [@egjs/hammerjs](https://www.npmjs.com/package/@egjs/hammerjs) fork because [hammer.js](https://www.npmjs.com/package/hammerjs) is [not maintained anymore](https://github.com/hammerjs/hammer.js/graphs/code-frequency). ## Features - Events emitted by hammer will propagate in order from child to parent elements. - Events are extended with a function `event.stopPropagation()` to stop propagation to parent elements. - Events are extended with a property `event.firstTarget` containing the element where a gesture started. - Supports changing and rearranging the HTML DOM on the fly. - Load via commonjs, AMD, or as a plain old JavaScript file. ## Install ```sh npm install @egjs/hammerjs propagating-hammerjs ``` ## Load ### Browser ```html ``` ### Commonjs (e.g. Node.js, Browserify) ```js var Hammer = require('@egjs/hammerjs'); var propagating = require('propagating-hammerjs'); function init() { var hammer = propagating(new Hammer(element)); } ``` ### ESM (e.g. ES6, typescript) ```typescript import Hammer from '@egjs/hammerjs'; import propagating from 'propagating-hammerjs'; function init() { const hammer = propagating(new Hammer(element)); } ``` ## Use To extend individual hammer.js instances with event propagation: ```js var hammer = propagating(new Hammer(element)); ``` To extend the global hammer.js constructor ```js Hammer = propagating(Hammer); ``` ## Examples Here a basic usage example. More examples are available in the folder [/examples](./examples/). ```html
parent
child
``` ## API Construction: ```typescript propagating(hammer: Hammer.Manager, options?: { preventDefault?: true | 'mouse' | 'touch' | 'pen' }): Hammer.Manager ``` ### parameters - `hammer: Hammer.Manager` An hammer instance or the global hammer constructor. - `options: Object` An optional object with options. Available options: - `preventDefault: true | 'mouse' | 'touch' | 'pen'`. Optional. Enforce preventing the default browser behavior. Cannot be set to `false`. ### returns Returns the same hammer instance with extended functionality. ### events The emitted [hammer.js events](http://hammerjs.github.io/api/#event-object) are extended with: - `event.stopPropagation()` If called, the event will not further propagate the elements parents. - `event.firstTarget` Contains the HTML element where a gesture started (where as `event.target` contains the element where the pointer is right now). ## Develop To generate the UMD bundle for commonjs and browser, run: ```sh npm run build ``` ## License MIT