I'm creating a graph using `svg` elements. I'm applying event handlers to them. The events work as desired, but I have an issue, because sometimes one of the elements is directly on top of the other, so when the event for the element on the bottom is supposed to be triggered it isn't. If you look at the image below, I have a `rect` with a `zoom` event. The zoom `event` triggers when the `mouse-wheel` happens on the `rect`, but when the circle is covering it, the event is not triggered. I have to have the `circles` on top of the `rect` so that they can be clicked when needed. How could i possibly get around this issue. I tried searching for solutions here on `SO`, but couldn't find anything specific to this issue.

I have a [JSFiddle](https://jsfiddle.net/codekhalifah/m2zbL32j/1/) that shows the circles. If you zoom anywhere else besides the circles, the zoom behavior will be triggered, but if you try to zoom on top of the circles, the zoom behavior won't work. 

[![enter image description here](https://i.stack.imgur.com/aBcj4.jpg)](https://i.stack.imgur.com/aBcj4.jpg)