react-zoom-pan-pinch
react-zoom-pan-pinch copied to clipboard
Desktop onClick
I'm using this on Desktop, and rendering a div and utilizing the zoom/pan functions. The div also has onClicks... When zooming and panning the onClicks are firing. How can I prevent this?
@joelmccauley Today I solved this problem for myself. You need to hang an onMouseDown and onMouseUp handler on the div that will track the mouse position and if at the time of onMouseUp the mouse position is different at the time of onMouseDown, then disable the onClick event using the flag
`onMouseDown = (e) => { this.isNotClick = false; this.mousePosition = { clientX: e.clientX, clientY: e.clientY }; };
onMouseUp = (e) => { if (this.mousePosition.clientX !== e.clientX || this.mousePosition.clientY != e.clientY) { this.isNotClick = true; } };
linkRoom = (event, hotspot) => { if (this.isNotClick) { return; } your code ... } `