propagating-hammerjs
Advanced tools
The `propagating-hammerjs` package is a wrapper around the popular `hammer.js` library, which is used for handling touch gestures in web applications. This wrapper adds event propagation capabilities to `hammer.js`, allowing touch events to bubble up through the DOM, similar to how native DOM events work.
Basic Gesture Handling
This feature allows you to handle basic touch gestures like pan, pinch, rotate, etc., on a specific DOM element. The events will propagate up the DOM tree, allowing for more flexible event handling.
const Hammer = require('hammerjs');
const PropagatingHammer = require('propagating-hammerjs');
const element = document.getElementById('myElement');
const hammer = PropagatingHammer(new Hammer(element));
hammer.on('pan', function(event) {
console.log('Pan gesture detected:', event);
});Event Propagation
This feature demonstrates how touch events can propagate from child elements to parent elements. In this example, both the parent and child elements can handle the 'tap' gesture, and the event will bubble up from the child to the parent.
const Hammer = require('hammerjs');
const PropagatingHammer = require('propagating-hammerjs');
const parentElement = document.getElementById('parentElement');
const childElement = document.getElementById('childElement');
const parentHammer = PropagatingHammer(new Hammer(parentElement));
const childHammer = PropagatingHammer(new Hammer(childElement));
parentHammer.on('tap', function(event) {
console.log('Tap gesture detected on parent:', event);
});
childHammer.on('tap', function(event) {
console.log('Tap gesture detected on child:', event);
});Custom Gesture Recognition
This feature allows you to define custom gestures. In this example, a custom 'doubletap' gesture is created and added to the Hammer instance. The event will propagate through the DOM as expected.
const Hammer = require('hammerjs');
const PropagatingHammer = require('propagating-hammerjs');
const element = document.getElementById('myElement');
const hammer = PropagatingHammer(new Hammer(element));
const customRecognizer = new Hammer.Tap({ event: 'doubletap', taps: 2 });
hammer.add(customRecognizer);
hammer.on('doubletap', function(event) {
console.log('Double tap gesture detected:', event);
});Hammer.js is a popular library for handling touch gestures in web applications. It provides a wide range of gesture recognizers and is highly customizable. However, it does not support event propagation out of the box, which is where `propagating-hammerjs` adds value.
Interact.js is a powerful library for handling drag-and-drop, resizing, and multi-touch gestures. It offers more advanced features compared to `propagating-hammerjs`, such as inertia and snapping, but it does not focus on event propagation.
AlloyFinger is a lightweight library for handling touch gestures. It is similar to Hammer.js but is smaller in size and has a simpler API. Like Hammer.js, it does not support event propagation natively.
Extend hammer.js (v2) with event propagation.
We use the @egjs/hammerjs fork because hammer.js is not maintained anymore.
event.stopPropagation() to stop
propagation to parent elements.event.firstTarget containing the
element where a gesture started.npm install @egjs/hammerjs propagating-hammerjs
<!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>
var Hammer = require('@egjs/hammerjs');
var propagating = require('propagating-hammerjs');
function init() {
var hammer = propagating(new Hammer(element));
}
import Hammer from '@egjs/hammerjs';
import propagating from 'propagating-hammerjs';
function init() {
const hammer = propagating(new Hammer(element));
}
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);
Here a basic usage example. More examples are available in the folder /examples.
<!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>
Construction:
propagating(hammer: Hammer.Manager, options?: {
preventDefault?: true | 'mouse' | 'touch' | 'pen'
}): Hammer.Manager
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 the same hammer instance with extended functionality.
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).
To generate the UMD bundle for commonjs and browser, run:
npm run build
MIT
2024-01-25, version 3.0.0
event.target in cases where the target has been removed
from the DOM (#17). Thanks @sgparrish.FAQs
Extend hammer.js with event propagation
We found that propagating-hammerjs demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
The Socket Research Team breaks down a malicious wrapper package that uses obfuscation to harvest credentials and exfiltrate sensitive data.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.