Question

我一直试图在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>
      );
    }
  }

我添加了触摸仿真器，因此我可以测试捏缩放。

所以这是我的问题：

启用触控模拟器后，Tap无法正常工作，但在Chrome和Firefox中无法正常使用
我尝试在Hammerjs's网站上进行缩放缩放，这适用于Firefox和Safari，但不适用于Chrome。当我在我的React应用程序中本地尝试时，它并不适用于任何这些。

有没有人有任何想法？

Answer 1

有类似的问题，因此将滑动切换为react-swipeable，但react-hammerjs留给水龙头。同样，在搜索解决方案时，看到一篇文章提到有人说，从React 16.4开始，某些功能被禁用，您可以尝试降级React版本，然后检查是否是这种情况。

带触摸模拟器的Hammerjs无法在React中工作

1 个答案: