propagating-hammerjs
Version:
Extend hammer.js with event propagation
121 lines (109 loc) • 3.09 kB
HTML
<html>
<head>
<title>Extensive usage example</title>
<script src="../node_modules/@egjs/hammerjs/dist/hammer.js"></script>
<script src="../propagating.js"></script>
<style>
#parent {
width: 600px;
height: 500px;
background: lightyellow;
border: 1px solid orange;
}
#child1,
#child2 {
width: 400px;
height: 200px;
background: lightgreen;
border: 1px solid green;
margin: 10px;
}
#grandchild1,
#grandchild2 {
width: 200px;
height: 100px;
background: lightblue;
border: 1px solid blue;
margin: 10px;
}
</style>
</head>
<body>
<p>Extend hammer.js with event propagation.</p>
<ul>
<li>Tapping or panning <code>grandchild1</code> will propagate to <code>child1</code> and then <code>parent1</code>.</li>
<li>Tapping or panning <code>grandchild2</code> will propagate to <code>child2</code>, which stops propagation and does not reach <code>parent</code>.</li>
</ul>
<p>See output in the developer console, check the order of events.</p>
<div id="parent">
parent
<div id="child1">
child1
<div id="grandchild1">
grandchild1
</div>
</div>
<div id="child2">
child2 (stops propagation)
<div id="grandchild2">
grandchild2
</div>
</div>
</div>
<script>
var parent = document.getElementById('parent');
var child1 = document.getElementById('child1');
var child2 = document.getElementById('child2');
var grandchild1 = document.getElementById('grandchild1');
var grandchild2 = document.getElementById('grandchild2');
var hammers = {};
hammers['parent'] = propagating(new Hammer(parent))
.on('tap', function (event) {
console.log('tap parent');
})
.on('pan', function (event) {
console.log('pan parent');
});
hammers['child1'] = propagating(new Hammer(child1))
.on('tap', function (event) {
console.log('tap child1');
})
.on('pan', function (event) {
console.log('pan child1');
});
hammers['grandchild1'] = propagating(new Hammer(grandchild1))
.on('tap', function (event) {
console.log('tap grandchild1');
})
.on('pan', function (event) {
console.log('pan grandchild1')
});
hammers['child2'] = propagating(new Hammer(child2))
.on('tap', function (event) {
console.log('tap child2');
event.stopPropagation();
})
.on('pan', function (event) {
console.log('pan child2');
event.stopPropagation();
});
hammers['grandchild2'] = propagating(new Hammer(grandchild2))
.on('tap', function (event) {
console.log('tap grandchild2');
})
.on('pan', function (event) {
console.log('pan grandchild2');
});
// hammerParent.on('hammer.input', function (event) {
// console.log('hammer.input', event);
// });
function destroy() {
Object.keys(hammers).forEach(function (name) {
hammers[name].destroy();
});
hammers = [];
}
</script>
</body>
</html>