StopPropagation() с элементом SVG и G

Я создал элемент SVG с поведением .on("click") и добавил g элементов с помощью .on("click") и подумал, что могу использовать d3.event.stopPropagation(), чтобы предотвратить запуск события SVG с событием g click. Вместо этого оба события продолжают стрелять. Поэтому я должен поместить stopPropagatio n в неправильное место.

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");
}

Ответы

Ответ 1

Кажется, вы смешиваете события click и mousedown. Вызов stopPropagation будет препятствовать распространению только одного события за раз, и это отдельные события.

Как правило, жест нажатия вызывает события mousedown, mouseup и click в этом порядке.

Вы можете оставить обработчик события click на дочерних элементах и ​​добавить обработчик события mousedown с вызовом stopPropagation, и это должно обеспечить то, что вы после.

Вот пример, демонстрирующий его использование в аналогичной ситуации с вашей.