|
3 月之前 | |
---|---|---|
.. | ||
examples | 3 月之前 | |
src | 3 月之前 | |
HISTORY.md | 3 月之前 | |
LICENSE | 3 月之前 | |
README.md | 3 月之前 | |
package.json | 3 月之前 | |
propagating.js | 3 月之前 |
Extend hammer.js v2 with event propagation.
event.stopPropagation()
to stop
propagation to parent elements.event.firstTarget
containing the
element where a gesture started.npm install propagating-hammerjs
<!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>
var Hammer = require('hammerjs');
var propagating = require('propagating-hammerjs');
function init() {
var hammer = propagating(new Hammer(element));
}
import Hammer from '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/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>
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