Stacked Element preventing event propagation

Question

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 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.

Answer 1

I'm not sure whether this helps you in a d3js context, but...

With normal JS you could just catch the wheel events in your circles and simply call the rect event handler.

Demo: (try clicking and mousewheeling over the shapes).

$("rect").on('wheel', rectWheel);
$("circle").on('wheel', circleWheel);
$("circle").on('click', circleClick);

function rectWheel(evt) {
  out("rect zoom");
}

function circleWheel(evt) {
  rectWheel(evt);
}

function circleClick(evt) {
  out("circle click");
}

function out(text) {
  var $out = $("#out");
  $out.text($out.text() + text + '\n');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg>
  <rect id="back" width="150" height="150" fill="red"/>
  <circle id="front" cx="100" cy="100" r="20" fill="green"/>
</svg>

<pre id="out">
</pre>