StopPropagation() with SVG element and G
d3.js, dom-events, stoppropagation, svg
Solution
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.
Problem
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"); } ```