47 lines
1.1 KiB
HTML
47 lines
1.1 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>Replace global hammer.js constructor</title>
|
|
<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>
|
|
|
|
<p>
|
|
Tap on child or parent. The child will stop propagation of the event.
|
|
</p>
|
|
|
|
<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);
|
|
|
|
var parent = document.getElementById('parent');
|
|
var hammer1 = new Hammer(parent)
|
|
.on('tap', function (event) {
|
|
alert('tap on parent');
|
|
});
|
|
|
|
var child = document.getElementById('child');
|
|
var hammer2 = new Hammer(child)
|
|
.on('tap', function (event) {
|
|
alert('tap on child');
|
|
|
|
// stop propagation from child to parent
|
|
event.stopPropagation();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |