StopPropagation() con elemento SVG e G

Ho creato un file SVG elemento con un .on("click") comportamento e allegato g elementi con .on("click") e pensato che avrei potuto utilizzare d3.event.stopPropagation() per mantenere il SVG evento click da sparare con il g fare clic su evento. Invece, entrambi gli eventi continuano a sparare. Quindi devo essere l’inserimento di stopPropagation nel posto sbagliato.

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");
}
InformationsquelleAutor Elijah | 2012-07-26

 

One Reply
  1. 23

    Ti sembra di essere mescolando il click e mousedown eventi. Chiamata stopPropagation solo impedire la propagazione di un solo evento alla volta, e questi sono eventi separati.

    In genere, un clic gesto provocherà mousedown, mouseup e click eventi, in che ordine.

    È possibile mantenere il click gestore di eventi nel bambino elementi e aggiungere un mousedown gestore di eventi con un stopPropagation chiamata, e che dovrebbe ottenere quello che stai cercando.

    Qui è un esempio dimostrando il suo utilizzo in una situazione simile alla tua.

    • Ciao Jason, io ancora non ho chiaro come il codice dovrebbe essere. Ho bisogno di evento <svg> per essere un evento mousedown e ho bisogno di evento <g> a essere un evento click. I siti aggiornati per includere la seguente, ma con nessun cambiamento: .on(‘evento mousedown’, function(){ d3.evento.sourceEvent.stopPropagation(); })
    • È necessario utilizzare d3.event.stopPropagation(). Il tuo codice non funziona, perché d3.event.sourceEvent non è definito. Ho aggiunto un esempio per voi, troppo.
    • Ho dimenticato di dire che ho cercato di eventi.origine e l’evento.target senza alcun effetto. Mi è stato appena copypasting vari stopPropagation() la terminologia utilizzata in altre D3 demo. Ma la demo è grande, ed è esattamente quello che ho bisogno di capire.
    • Ottimo link, spiega perfettamente

Lascia un commento