58 lines
1.6 KiB
HTML
58 lines
1.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Use event.firstTarget</title>
|
||
|
|
<script src="../node_modules/hammerjs/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>
|