I created an SVG element with an .on("click")
behavior and appended g elements with .on("click")
and thought that I could use d3.event.stopPropagation()
to keep the SVG click event from firing with the g click event. Instead, both events continue to fire. So I must be placing stopPropagatio
n in the wrong place.
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");
}
You seem to be mixing up the click
and mousedown
events. Calling stopPropagation
will only prevent propagation of a single event at a time, and these are separate events.
Typically, a click gesture will cause mousedown
, mouseup
and click
events, in that order.
You can keep the click
event handler on the child elements and add a mousedown
event handler with a stopPropagation
call, and that should achieve what you're after.
Here is an example demonstrating its use in a similar situation to yours.