121 lines
3.0 KiB
HTML
121 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Extensive usage example</title>
|
|
<script src="../node_modules/hammerjs/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> |