propagating-hammerjs
Version:
Extend hammer.js with event propagation
58 lines (53 loc) • 1.64 kB
HTML
<html>
<head>
<title>Use event.firstTarget</title>
<script src="../node_modules/@egjs/hammerjs/dist/hammer.js"></script>
<script src="../propagating.js"></script>
<style>
div {border: 1px solid black;}
#parent {width: 600px; height: 400px; background: lightgreen;}
#child {width: 400px; height: 200px; background: yellow; margin: 10px;}
</style>
</head>
<body>
<p>
Pan the child element, and check out <code>event.target</code> and <code>event.firstTarget</code>.
</p>
<ul>
<li id="firstTarget">First target:</li>
<li id="target">Target:</li>
</ul>
<div id="parent">
parent
<div id="child">
child
</div>
</div>
<script>
// replace the global Hammer constructor with a propagated one, such that
// hammer.js instances automatically have event propagation.
Hammer = propagating(Hammer, {
preventDefault: true
});
var parent = document.getElementById('parent');
var hammer1 = new Hammer(parent)
.on('pan', function (event) {
console.log('pan on parent', event);
});
var child = document.getElementById('child');
var hammer2 = new Hammer(child)
.on('pan', function (event) {
console.log('pan on child', event);
document.getElementById('firstTarget').innerHTML = 'First target: ' + event.firstTarget.id;
document.getElementById('target').innerHTML = 'Target: ' + event.target.id;
})
.on('panstart', function (event) {
console.log('panstart on child', event);
})
.on('panend', function (event) {
console.log('panend on child', event);
});
</script>
</body>
</html>