React Hammer组件中Pinch（缩放）事件无法触发的问题求助

Hey there! Let's figure out why your pinch event isn't firing—this is a common gotcha with react-hammerjs, so I've got a few things for you to check:

1. Test in a touch-capable environment first #

Pinch events are touch-only—they won’t trigger with a mouse. If you’re testing on a desktop, use Chrome DevTools’ device simulator (toggle the "Device Toolbar" icon), select a mobile device, then hold Shift while dragging with your mouse to simulate a two-finger pinch gesture.

2. Verify your event handler naming (try specific pinch events) #

While onPinch is a valid prop in react-hammerjs, using more specific event handlers can help rule out issues. Swap your prop to match your function name, or test onPinchIn/onPinchOut to see if those fire:

<Hammer 
  onPinchStart={this.onPinchStart.bind(this)} 
  options={{ recognizers: { pinch: { enable: true } } }}
>
  <div className="investigate__panel--zoom">
    <p>PINCH TO ZOOM</p>
  </div>
</Hammer>

3. Add CSS touch-action to block browser defaults #

Modern browsers have built-in touch behaviors (like page zoom) that can interfere with Hammer’s pinch recognizer. Add this CSS to your target div to let Hammer take over touch interactions:

.investigate__panel--zoom {
  touch-action: none;
}

4. Check for recognizer conflicts #

If you’re using other Hammer gestures (like pan), they might block the pinch event by default. Explicitly allow them to work together in your options:

options={{
  recognizers: {
    pinch: { enable: true },
    pan: { enable: true, recognizeWith: 'pinch' } // Add this if using pan
  }
}}

5. Update react-hammerjs to the latest version #

Older versions of the library had bugs with pinch event handling. Run this command to upgrade:

npm update react-hammerjs

After trying these steps, your pinch event should start firing. Let me know if any of these fix it!

内容的提问来源于stack exchange，提问作者alexandraclaire