examples/global.html

<!DOCTYPE html>
<html>
<head>
  <title>Replace global hammer.js constructor</title>
  <script src="../node_modules/@egjs/hammerjs/dist/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>