使用SVG元素和G的StopPropagation()

Question

我创建了一个带有.on("click")行为的SVG元素,并使用.on("click")附加了g元素,并认为我可以使用d3.event.stopPropagation()来保持SVG click事件不会被触发g点击事件.相反,这两个事件继续发生.所以我必须把stopPropagation放在错误的地方.

svg = d3.select("#viz").append("svg:svg")
    .attr("width", 800)
    .attr("height", 800)
    .on("mousedown", mousedown);

sites = svg.selectAll("g.sites")
    .data(json.features)
    .enter()
    .append("svg:g")
    .on("click", siteClick)
    ;

sites.append("svg:circle")                
    .attr('r', 5)
    .attr("class", "sites")
    ;

function mousedown() {
    console.log("mouseDown");
}

function siteClick(d, i) {
    d3.event.stopPropagation();
    console.log("siteClick");
}

Answer 1

你好像在混淆click和mousedown事件.调用stopPropagation只会阻止一次传播单个事件,这些是单独的事件.

通常情况下,一次点击的手势会引起mousedown,mouseup和click事件的顺序.

您可以将click事件处理程序保留在子元素上,并mousedown使用stopPropagation调用添加事件处理程序,这应该可以实现您所追求的目标.

这是一个示例,演示了它在类似情况下的使用.