删除事件监听器与d3js不工作

Remove event listener with d3js not working

本文关键字：工作 d3js 事件 监听器 删除      更新时间：2023-09-26

我有一个SVG结构，里面有一些形状。我想在单击形状时触发一个事件，在单击SVG时触发另一个事件。问题是SVG事件总是被触发。

为了防止这种情况，我禁用了形状的事件冒泡。此外，我曾试图禁用事件d3，但似乎不工作。还尝试使用原生Javascript代码禁用事件。

一个超级简单代码的例子是: <<p> SVG结构/strong> 
<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")
        });
});

我知道事件没有被禁用，因为我从clickEvents函数获得onsole.log()文本警报。

在本例中，语法为:

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");
        });
});
相关文章：