如何使SVG元素仅响应某个事件，但将其他事件传递给D3或jQuery中的较低层

Question

所有

我是D3和jQuery事件处理的新手。

现在：

var svg = d3.select("body svg")
                    .style("border", function(){
                        return "1px solid black";   
                    })
                    .attr("width", 400)
                    .attr("height", 400);


var btm = svg.append("g")
                .attr("transform", function(){
                    return "translate(100,100)";
                })
                .append("rect")
                .attr("width", 100)
                .attr("height", 100)
                .style("fill", "tomato");

btm.on("mousedown", function(){
    console.log("tomato mousedown");
});


btm.on("mouseup", function(){
    console.log("tomato mouseup");
});

var bup = svg.append("g")
                .attr("transform", function(){
                    return "translate(150,150)";
                })
                .append("rect")
                .attr("width", 100)
                .attr("height", 100)
                .style("fill", "lightseagreen");
bup.on("mousedown", function(){
    console.log("seagreen mousedown");
    d3.select(this).style("pointer-events", "none");
});

代码使上层（seagreen rect）响应鼠标按下，并禁用自身响应并让所有事件传递给较低的番茄红色矩形

我想要做的是让 seagreen rect仅响应鼠标悬停，但让番茄红色直接响应mousedown （但仍保持绿色顶部）番茄红一个）。

我查了the pointer-events page，但不知道用哪一个或哪些来配置它们，有人可以帮忙吗？

谢谢