Stopping propagation prevent closing other UI components

d3 / d3-zoom

Pan and zoom SVG, HTML or Canvas using mouse or touch input.

https://d3js.org/d3-zoom

ISC License

507 stars 143 forks source link

Stopping propagation prevent closing other UI components #154

Closed charleslaw closed 5 years ago

charleslaw commented 6 years ago

I have menus/widgets in a UI I'm building that usually close when clicking away on another part of the screen. But if the user clicks on my d3 visualization, the mouse down event gets stopped and any open menus do not close.

I worked around this by commenting out this line: https://github.com/d3/d3-zoom/blob/master/src/zoom.js#L266

Are there any potential side effects of removing this? I do not see any, but I do not know the purpose of this line.

mbostock commented 5 years ago

Per the API reference, the zoom behavior consumes any events it handles directly. If you don’t want the zoom behavior to consume the event, you should use zoom.filter to tell the zoom behavior that you don’t want the click to initiate a zoom gesture. Or, you can equivalently temporarily remove the zoom behavior’s event listeners (selection.on(".zoom", null)) or set pointer-events: none on the zoomable area.