d3 How to trigger event on the object behind text

Question

I draw A rect and text on svg.

In order to show text, I render rect first.

I add mouse click event to rect

when I click the text, it seems the rect is not selected, because rect is behind text, so text is selected frist.

I need to select trigger the event when mouse click inside the rect.

How should I do?

Thanks!

Fiddle

You can see, when you mouse click on the text, the rect is not clicked.

var data = ["TEXT SAMPLE TEXT SAMPLE TEXT SAMPLE"];

var svg = d3.select("svg");
var bar = svg.selectAll("g")
    .data(data)
  .enter().append("g")
    .attr("transform", function(d, i) { return "translate(100,100)"; });

bar.append("rect")
    .attr("width", 200)
    .attr("height", 50)
    .style("fill", "#f00")
    .on("click", function (d) {
                            alert("text");
                    });
bar.append("text")
    .attr("x", 10)
    .attr("y", 25)
    .attr("dy", "-.35em")
    .text(function(d) { return d; });

Answer 1

You can attach a style to the text to ignore mouse events. Here is the example:

Style:

.bar-text {
    pointer-events: none;
}

Modified code:

bar.append("text")
    .attr("x", 10)
    .attr("y", 25)
    .attr("class", "bar-text") // add class
    .attr("dy", "-.35em")
    .text(function(d) { return d; });

Answer 2

Attach the handler to the g element. Complete demo here.