3

内部にいくつかの形状があるSVG構造があります。シェイプがクリックされたときにイベントを発生させ、SVG をクリックしたときに別のイベントを発生させたいと考えています。問題は、SVG イベントが常に発生することです。

これを防ぐために、シェイプからのイベント バブリングを無効にしています。また、d3でイベントを無効にしようとしましたが、うまくいかないようです。また、ネイティブ Javascript コードでイベントを無効にしようとしました。

非常に単純なコードの例は次のとおりです。

SVG 構造

<svg id="canvas" xmlns="http://www.w3.org/2000/svg" version="1.1">
    <g>
        <circle class="shape" r="10" cx="10" cy="10">
    </g>
</svg>

Javascript コード

d3.select('#canvas').on('click',svgClickEvents);

d3.selectAll('.item')
    .on("mouseover",mouseoverItem)
    .on('mouseleave',mouseleaveItem);

//click
d3.selectAll('.item',function(){

    //when an item is clicked, svgClickEvents must not be fired   
    d3.select('#canvas').on('click',null);  //this should remove the event listener
    //also tried with getElementById('canvas').removeEventListener('click',clickEvents,false);

d3.select(this)
        .on("click",function() {
            d3.event.stopPropagation(); 
            console.log("click circle")
        });
});

onsole.log()clickEvents 関数からテキスト アラートを取得しているため、イベントが無効になっていないことはわかっています。

4

1 に答える 1

7

この場合、構文は次のとおりです。

d3.selectAll('.classname', function() { ... });

d3.js では機能しません。代わりに、次のようなものを使用する必要があります。

d3.selectAll('.classname').each(function() { ... });

したがって、上記のコードでは、これは機能するはずです。

d3.selectAll('.item')
  .each(function(){

    //when an item is clicked, svgClickEvents must not be fired   
    d3.select('#canvas').on('click', null);  //this should remove the event listener

    d3.select(this).on("click",function() {
            d3.event.stopPropagation(); 
            console.log("click circle");
        });
});
于 2013-05-29T20:38:39.860 に答える