search

dy / pan-zoom

Pan / zoom for any element
MIT License
88 stars 15 forks source link

Prevent pan & zoom effect on children nodes #16

Closed anhnhoktvn closed 5 years ago

anhnhoktvn commented 5 years ago

I have an issue when the container element (which apply pan-zoom) has some input element. When I select some text (movedown and mousemove events happen) in the input element, the container will trigger a pan move too. How to prevent this?

Could we provide an srcElement property in the callback of panzoom so that we can detect whether the event is triggered from an child node and so that we can handle this case.

dy commented 5 years ago

Done, @3.5.0 should support srcElement. Note though for pinch-zoom that's always target itself, there's no way to detect orig target from what I see.

anhnhoktvn commented 5 years ago

Thank you very much. Unfortunately, I still can not select the text in child node. I found out that an eventlistener (onMove function) in impetus.js library has canceled the mousemove event. To make it work I have to comment out that line (ev.preventDefault()). Another way to workaround for this issue is wrapping the children nodes into another node and add a stoppropagation to stop the event go up to the containter. Just leave a comment here if anyone has the same issue.

dy commented 5 years ago

@anhnhoktvn can you stoppropagation directly on srcElement, in a separate event listener?

anhnhoktvn commented 5 years ago

@dy The e parameter in the callback function of panzoom is not the mouse/wheel/touch event. Therefore I can not call stoppropagation there. And the children nodes is dynamically added/removed, adding separate event listener to all the children nodes seems not a good idea.

Could you also expose the original event? Because in the near future, I'd like to detect also modifier keys (ctrl/shift/alt) in the callback too.