我有一个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")
});
});
我知道事件没有被禁用,因为我从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");
});
});