Skip to main content
100%

No Zoom on Context Menu

✓ Published0🌍 Public
Mmbostock
Last edited Feb 9, 2016
Created on Aug 2, 2013

This example demonstrates how to selectively disable D3's zoom behavior by intercepting the mousedown event. A grid of fine lines fills an SVG, and panning works only with the left mouse button; right-click or control-click triggers a colored pulse animation instead of zooming. The code uses `d3.behavior.zoom`, registers a `mousedown` listener, and calls `d3.event.stopImmediatePropagation()` to prevent the zoom handler from firing. Red pulses mark stopped events, while green pulses show successful zoom triggers.

AI-generated description

You can selectively disable zooming by stopping the propagation of the mousedown event. Here, a mousedown listener restricts panning to left click, so that panning is not initiated when the context menu opens. (On OS X, the context menu also appears on control-mousedown, so this is prevented as well.)

The mousedown listener and zoom behavior are registered on the same element, so d3.event.stopImmmediatePropagation is needed to prevent the zoom behavior from hearing the mousedown event. Alternatively, you could use a capturing listener on a parent element, or a non-capturing listener on a child element.

On each mousedown, a small red pulse visually indicates that the event was stopped, while a green pulse indicates that the zoom behavior was triggered.

gpl-3.0 Licensed

Similar vizzes