itcast bd67f780cf 完成		10 månader sedan
..
examples	bd67f780cf 完成	10 månader sedan
src	bd67f780cf 完成	10 månader sedan
HISTORY.md	bd67f780cf 完成	10 månader sedan
LICENSE	bd67f780cf 完成	10 månader sedan
README.md	bd67f780cf 完成	10 månader sedan
package.json	bd67f780cf 完成	10 månader sedan
propagating.js	bd67f780cf 完成	10 månader sedan

propagating-hammerjs

Extend hammer.js v2 with event propagation.

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

npm install propagating-hammerjs

Load

Browser

<!DOCTYPE html>
<html>
<head>
  <script src="https://unpkg.com/hammerjs@latest/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)

var Hammer = require('hammerjs');
var propagating = require('propagating-hammerjs');

function init() {
  var hammer = propagating(new Hammer(element));
}

ESM (e.g. ES6, typescript)

import Hammer from 'hammerjs';
import propagating from 'propagating-hammerjs';

function init() {
  const hammer = propagating(new Hammer(element));
}

Use

To extend individual hammer.js instances with event propagation:

var hammer = propagating(new Hammer(element));

To extend the global hammer.js constructor

Hammer = propagating(Hammer);

Examples

Here a basic usage example. More examples are available in the folder /examples.

<!DOCTYPE html>
<html>
<head>
  <script src="node_modules/hammerjs/hammer.js"></script>
  <script src="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:

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

npm run build

License

MIT

README.md