javascript - Give Entire D3 Map Event Listener -

i have map of featured cities plotted. states , cities have own click events. clicking state zooms state , displays more cities within state. when clicking city plots new city , draws path new city while zooming bring 2 cities in view.

while being zoomed 2 cities able click anywhere on map have reset. able without removing , restoring existing click events if possible.

anyone know way put invisible layer on whole svg it's own click event?

add <rect> element covers whole map. if make fill="none" invisible. add click event handler reset function when <rect> clicked on.

you can manipulate pointer-events property make catch or not catch events. setting pointer-events="all" make catch events while pointer-events="none" make pass through events. switch attribute around depending on whether map zoomed or not.