Question

I’m trying to add an event listener, specifically a selection.on("click" function() { } ), to the entirety of the browser window, except for a defined area (that is a donut or annulus). In other words, I want to execute a particular function when a user clicks anywhere in the browser window except for a defined area (here specifically a donut or annulus).

Answer 1

I’m not familiar with d3.js but from the code you posted it looks like you are still dealing with regular DOM events. The basic way to do what you want is to bind the events like this:

• The event that should handle all the clicks is bound to the document/body.
• Then you bind another event to the elements that should not cause the first handler to fire and call the stopPropagation() method of that event object. This will prevent it from bubbling to the previous handler and thus it will never execute.