带有触摸模拟器的 Hammerjs 在 React 中不起作用答案

【问题标题】：Hammerjs with touch emulator not working in React带有触摸模拟器的 Hammerjs 在 React 中不起作用
【发布时间】：2017-08-30 15:43:53
【问题描述】：

我一直在尝试在 React 中使用 Hammerjs 测试和模拟触摸事件，但浏览器和事件之间的行为极其不一致。

让我们来看看简单的代码：

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 (
      <div>
        <canvas
          ref={(canvas) => { this.canvas = canvas; }}
        />
      </div>
      );
    }
  }

我添加了触摸模拟器，以便我可以测试捏缩放。

所以这是我的问题：

在启用触摸模拟器时点击不起作用，但在没有 Chrome 和 Firefox 时可以正常工作
我在Hammerjs's 网站上尝试了捏缩放，这适用于Firefox 和Safari，但不适用于Chrome。当我在我的 React 应用程序中本地尝试它时，它不适用于任何这些。

有人有什么想法吗？

【问题讨论】：

标签： javascript reactjs hammer.js

【解决方案1】：

有类似的问题，所以滑动切换到react-swipeable，但react-hammerjs 离开了点击。另外在搜索解决方案时看到一篇文章有人提到，自 React 16.4 以来某些功能被禁用，您可以尝试降级 React 版本，然后检查是否是这种情况。

【讨论】：