# propagating-hammerjs

> Extend hammer.js with event propagation

Latest version **3.0.0** (published 2024-01-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install propagating-hammerjs
pnpm add propagating-hammerjs
yarn add propagating-hammerjs
bun add propagating-hammerjs
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.0.0 |
| Published | 2024-01-25 |
| First published | 2014-12-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 29 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 41 |
| Author | Jos de Jong |
| Maintainers | josdejong |
| Keywords | hammerjs, touch, gestures, event, propagation |

## Links

- npm: https://www.npmjs.com/package/propagating-hammerjs
- Repository: https://github.com/josdejong/propagating-hammerjs
- Issues: https://github.com/josdejong/propagating-hammerjs/issues
- npm.io page: https://npm.io/package/propagating-hammerjs

## Alternatives

- [async-exit-hook](https://npm.io/package/async-exit-hook.md) — 3.7M weekly downloads
- [evnty](https://npm.io/package/evnty.md) — 7.2K weekly downloads
- [eleventy-plugin-asciidoc](https://npm.io/package/eleventy-plugin-asciidoc.md) — 3.5K weekly downloads
- [@jswork/next-get2get](https://npm.io/package/@jswork/next-get2get.md) — 945 weekly downloads
- [@dashersw/axon](https://npm.io/package/@dashersw/axon.md) — 934 weekly downloads

## Recent versions

- 3.0.0 (latest) — 2024-01-25
- 2.0.1 — 2020-10-14
- 2.0.0 — 2020-10-14
- 1.5.0 — 2020-10-14
- 1.4.7 — 2019-07-27
- 1.4.6 — 2016-03-05
- 1.4.5 — 2016-01-13
- 1.4.4 — 2016-01-04
- 1.4.3 — 2015-06-04
- 1.4.2 — 2015-06-02
- 1.4.1 — 2015-04-20
- 1.4.0 — 2015-04-17
- 1.3.0 — 2015-04-14
- 1.2.2 — 2015-02-09
- 1.2.1 — 2015-01-29
- … 4 more at https://npm.io/package/propagating-hammerjs/versions

## 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
<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/@egjs/hammerjs@latest/dist/hammer.js"></script>
  <script src="https://unpkg.com/propagating-hammerjs@latest/propagating.js"></script>
  <script>
    function init() {
      var hammer = propagating(new Hammer(element));
    }
  </script>
</head>
<body>
</body>
</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
<!DOCTYPE html>
<html>
<head>
  <script src="node_modules/@egjs/hammerjs/dist/hammer.js"></script>
  <script src="node_muludes/propagating-hammerjs/propagating.js"></script>
  <style>
    div     {border: 1px solid black;}
    #parent {width: 400px; height: 400px; background: lightgreen;}
    #child  {width: 200px; height: 200px; background: yellow; margin: 10px;}
  </style>
</head>
<body>

<div id="parent">
  parent
  <div id="child">
    child
  </div>
</div>

<script>
  var parent = document.getElementById('parent');
  var hammer1 = propagating(new Hammer(parent))
      .on('tap', function (event) {
        alert('tap on parent');
      });

  var child = document.getElementById('child');
  var hammer2 = propagating(new Hammer(child))
      .on('tap', function (event) {
        alert('tap on child');

        // stop propagation from child to parent
        event.stopPropagation();
      });
</script>
</body>
</html>
```

## 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

---
_Source: https://npm.io/package/propagating-hammerjs · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._