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.

Can you bind mouse-wheel event to the whole page, and then check if mouse pointer is on 'rect' boundaries ? — JuniorDev, Sep 23 '16 at 17:45
@JuanMendes The `rect` has a special `zoom` behavior given to it by `d3`, i'm not sure it would work the same if applied to each of the circles — Abdullah Rasheed, Sep 26 '16 at 16:54
Does using `pointer-events:none` only on the selected circle alone not work? Clicking on the curve to highlight other circles will still work. I don't see any hover/click functionality on the selected circle at present. — phreakv6, Sep 26 '16 at 17:10
@phreakv6 there are a bunch of transparent circles on over the line. When you click one of the transparent circles, i just change its class. — Abdullah Rasheed, Sep 26 '16 at 17:25

score 1 · Answer 1 · answered Sep 26 '16 at 18:11

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>

phreakv6 · Answer 2 · 2016-09-26T17:12:54.433

0

You can add

circle.selected {
    pointer-events:none;
}

and see if it helps.

UPDATE: I just noticed that disabling pointer-events is not an option going by the OP's comments. In that case, checking if the event on the selected circle is a mousewheel zoom event and if so, then adding a disable-zoom css class to the selected circle might work with css for .disable-zoom class having the pointer-events:none; directive.

edited Sep 26 '16 at 17:12

answered Sep 26 '16 at 16:49

phreakv6

2,135
1
9
11

OP already said that pointer-events none is not an option, they need to being events on the circle – Ruan Mendes Sep 26 '16 at 16:50
Then how will the zoom event be triggered on the `rect`? – Abdullah Rasheed Sep 26 '16 at 17:09
The same css I have! – phreakv6 Sep 27 '16 at 03:47

Stacked Element preventing event propagation

2 Answers2