title: Hammerjs with touch emulator not working in React
body: <p>I've been trying to test and emulate touch events using Hammerjs in React, but with extremely inconsistent behavior between browsers and events.</p>
  
  <p>Let's take simple code like:</p>
  
  <pre><code>import React from 'react';
  import PropTypes from 'prop-types';
  import Hammer from 'hammerjs';
  import touchEmulator from 'hammer-touchemulator';
  
  function testTap() {
    console.log('test zoom');
  }
  
  function testPinch() {
    console.log('test pinch');
  }
  
  class PDF extends React.Component {
    constructor(props) {
      super(props);
        touchEmulator();
        ...
    }
  
    componentDidMount() {
      this.hammer = Hammer(this.canvas);
      this.hammer.on('tap', testTap);
      this.hammer.get('pinch').set({ enable: true });
      this.hammer.on('pinch', testPinch);
    }
  
    ...
    render() {
      return (
        &lt;div&gt;
          &lt;canvas
            ref={(canvas) =&gt; { this.canvas = canvas; }}
          /&gt;
        &lt;/div&gt;
        );
      }
    }
  </code></pre>
  
  <p>I added the touch emulator so I can test pinch zooming.</p>
  
  <p>So here are my problems:</p>
  
  <ul>
  <li>Tap doesn't work when touch emulator is enabled, but works fine without in Chrome and Firefox</li>
  <li>I tried the pinch zoom on <a href="http://hammerjs.github.io/#try-it" rel="nofollow noreferrer">Hammerjs's</a> site and this works in Firefox and Safari, but not in Chrome.  When I try it locally in my React app it doesn't work on any of these.</li>
  </ul>
  
  <p>Does anyone have any ideas?</p>