我有一个 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 函数的文本警报。
在这种情况下,语法:
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");
});
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)