15

動作を備えたSVG要素を作成し、.on("click")g要素を追加して、gclickイベントでSVGクリックイベントが発生しないようにするために.on("click")使用できると考えました。d3.event.stopPropagation()代わりに、両方のイベントが引き続き発生します。だから私は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");
}
4

1 に答える 1

25

clickとmousedownイベントを混同しているようです。呼び出しstopPropagationは、一度に1つのイベントの伝播を防ぐだけであり、これらは別個のイベントです。

通常、クリックジェスチャにより、、mousedownおよびmouseupイベントclickがこの順序で発生します。

click子要素にイベントハンドラーを保持mousedownし、呼び出しを使用してイベントハンドラーを追加stopPropagationできます。これにより、目的の結果が得られるはずです。

これは、あなたと同じような状況での使用を示す例です。

于 2012-07-26T23:21:34.233 に答える