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

Я создал элемент SVG с поведением .on("click") и добавил элементы g с .on("click") и подумал, что могу использовать d3.event.stopPropagation(), чтобы событие щелчка SVG не срабатывало с событием щелчка 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");
}

svg d3.js dom-events stoppropagation
person Elijah    schedule 26.07.2012    source источник

Ответы (1)


arrow_upward
25
arrow_downward

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

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

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

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

person Jason Davies    schedule 26.07.2012
comment
Привет, Джейсон, мне до сих пор не ясно, как будет выглядеть код. Мне нужно, чтобы событие на ‹svg› было событием mousedown, и мне нужно, чтобы событие на ‹g› было событием щелчка. Я обновил сайты, включив в них следующее, но без изменений: .on('mousedown', function(){ d3.event.sourceEvent.stopPropagation(); }) - person Elijah; 27.07.2012
comment
Вам нужно использовать d3.event.stopPropagation(). Ваш код не будет работать, так как d3.event.sourceEvent не определено. Я добавил пример для вас сейчас тоже. - person Jason Davies; 27.07.2012
comment
Я забыл упомянуть, что пробовал event, event.source и event.target безрезультатно. Я просто копировал различную терминологию stopPropagation(), используемую в других демонстрациях D3. Но ваша демонстрация великолепна, и именно то, что мне нужно, чтобы понять ее. - person Elijah; 28.07.2012
comment
Отличная ссылка, отлично объясняет - person Drenai; 17.07.2016