javascript - Remove event listener with d3js not working - Stack Overflow

admin管理员组

文章数量:1328623

I have an SVG structure where there are some shapes inside. I want to fire an event when a shape is clicked and another one when is clicked over the SVG. The problem is the SVG event is always fired.

In order to prevent this I'm disabling event bubbling from the shape. Also I've tried to disable the event with d3 but seems to not work. Also tried to disable event with the native Javascript code.

An example of the super simple code is:

SVG structure

<svg id="canvas" xmlns="" version="1.1">
    <g>
        <circle class="shape" r="10" cx="10" cy="10">
    </g>
</svg>

Javascript code

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

I know event is not being disabled because I'm getting the onsole.log() text alert from clickEvents function.

I have an SVG structure where there are some shapes inside. I want to fire an event when a shape is clicked and another one when is clicked over the SVG. The problem is the SVG event is always fired.

In order to prevent this I'm disabling event bubbling from the shape. Also I've tried to disable the event with d3 but seems to not work. Also tried to disable event with the native Javascript code.

An example of the super simple code is:

SVG structure

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

Javascript code

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

I know event is not being disabled because I'm getting the onsole.log() text alert from clickEvents function.

• javascript
• d3.js
• svg
• dom-events
• event-bubbling

Share Improve this question Follow edited Oct 6, 2019 at 17:40 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked May 29, 2013 at 12:59 JossJoss 55511 gold badge88 silver badges2828 bronze badges 0

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

In this case, the syntax:

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

does not work in d3.js. Instead you should use something like:

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

So in your code above, this should work:

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

本文标签： javascriptRemove event listener with d3js not workingStack Overflow