examples/extensive.html

<!DOCTYPE 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>