How do you make an SVG element mouse event bubble up through another element?

Question

I have a D3 line chart where I'm placing a rect 'behind' the chart. This rect has a mouse event attached to it, but the problem is my chart also has another rect overlaid 'above' the chart that also has events attached to it. How do I get the lower rect mouse events to bubble up above the higher rect that is overlayed on top? Thanks so much! I've created a Fiddle here: http://jsfiddle.net/TnjCC/1/ And here is my code. Look for the "This is where I need the mouseover to bubble up" comment to see which element I'd like to bubble up. ``` var data = [ {"date":"1-May-13","close":58.13}, {"date":"30-Apr-13","close":53.98}, {"date":"27-Apr-13","close":67.00}, {"date":"26-Apr-13","close":89.70}, {"date":"25-Apr-13","close":99.00}, {"date":"24-Apr-13","close":130.28}, {"date":"23-Apr-13","close":166.70}, {"date":"20-Apr-13","close":234.98}, {"date":"19-Apr-13","close":345.44}, {"date":"18-Apr-13","close":443.34}, ]; var margin = {top: 20, right: 50, bottom: 30, left: 50}, width = 960 - margin.…

Accepted Answer

For a quick fix, you can move the range above the overlay and manually call the overlay event handlers from the range.

http://jsfiddle.net/Rk5Hp/

```
 svg.append("rect")
      .attr("class", "overlay")
      .attr("width", width)
      .attr("height", height)
      .on("mouseover", function() { focus.style("display", null); })
      .on("mouseout", function() { focus.style("display", "none"); })
      .on("mousemove", mousemove);

// move range above overlay and call the overlay event handlers from there
  svg.append("rect")
      .attr("id", "range")
      .attr("class", "range")
      .attr("x", left)
      .attr("width", wid)
      .attr("height", height)
      .on("mousemove", mousemove)
      .on("mouseout", function() { focus.style("display", "none"); })
      .on("mouseover", function() {
          focus.style("display", null);
          // event handling for range mouseover (alert broke mouse move)
          console.log("I can see you!");
      });
```

Bubbling acts at the dom level, and since there is no way to have a rect be a child of another rect, bubbling will not take care of this for you. Grouping the elements together and placing a handler that checks the event target on the group will keep you from registering the event handler twice, but suffers from the same basic problem: when elements overlap, whichever element is declared last in the source order will get the event.

How do you make an SVG element mouse event bubble up through another element?

Solution

Problem