Question

我正在为Chrome版本66.0.3359.139（可能最终还有其他版本）编写一个javascript应用程序。我正在尝试使可单击的SVG元素。也就是说，点击它们的onclick方法时应调用它们。

这是我的第一次尝试：

<html><body style="margin:0;overflow:hidden">
<svg id="svg" width="100%" height="100%"></svg>
<script>

let svg  = document.getElementById("svg");

function clear()
{
    svg.innerHTML = '';
}

function circle(p, r)
{
    let e = document.createElementNS(svg.namespaceURI, 'circle');
    e.setAttribute('cx', p.x);
    e.setAttribute('cy', p.y);
    e.setAttribute('r', r);
    svg.appendChild(e);
    return e;
}


onresize = function()
{
    clear();
    let r = svg.getBoundingClientRect();
    c1 = circle({x: r.x + r.width/2, y:r.y + r.height - 20}, 10);
    c2 = circle({x: r.x + r.width/2, y:20}, 10);
    c1.onclick = function(){svg.removeChild(c1);}
    c2.onclick = function(){svg.removeChild(c2);}
}
onresize();

</script>
</body></html>

此代码在页面顶部创建一个圆圈，在页面底部创建一个圆圈。页面调整大小时，圆圈也会重新计算，以便始终可见。作为测试，我想在单击圆圈时将其删除。

有时上述代码有效。但是，当我全屏运行它时，在打开窗口底部的开发人员工具然后关闭开发人员工具之后，将无法单击底部的圆圈-直到下一次我缩放或调整窗口大小之后。 / p>

我认为这可能是浏览器错误，因为如上所述，当我使用开发人员工具时会显示该错误，而在Firefox中根本不会出现。但是后来我注意到其他网站没有这个问题。此外，要找到浏览器错误并非易事，因为许多网站都可以在Chrome浏览器中工作。

有人看到我的Javascript代码有问题，可能导致最下面的圈子无法收到onclick事件吗？

更新

我无法在Chrome 74.0.3729.169 Linux或Windows版本中重现此问题。它可能特定于Linux chrome版本66.0.3359.139。

但是，这仍然并不意味着它是浏览器错误...代码是否应该正常工作？

更新

在Linux Chrome版本66.0.3359.181中也可以重现该问题。我很难降级到66.0.3359.139（我找不到详细信息。谷歌可能会烦人）。所以我现在的目标是66.0.3359.181。

更新

当前问题似乎是由

引起的

<body style="margin:0">

如果删除该样式，则不会出现当前问题，但是会出现another problem。当前的问题与以下情况同样发生：

<style>
html, body, * { 
     margin: 0; 
     padding: 0; 
}
</style>

我的版本和Dataminion发布的D3版本都是这种情况。

因此，我们在这里确实有一块肿块……可以踩到它，但在其他地方会造成一块肿块。解决事件，但是SVG无法填满页面。解决上述两个问题，但升级浏览器（并处理一组新的错误）。

更新

它与

一起使用

<body style="margin:1">

的唯一缺点是svg关闭了1个像素，并且出现了多余的滚动条。请注意：

<body style="margin:1;overflow:hidden">

删除滚动条并重新引入该错误。

因此，overflow:hidden或margin:0都会引起问题。这些都将删除滚动条。因此，问题与没有滚动条（无论如何删除）有关。

Answer 1

为什么不为该svg元素尝试父div？应该可以。

加油

Answer 2

@kaiido是正确的，这里的问题与浏览器相关，因为发布的原始代码可以在现代浏览器中正常工作。

关于canIuse的建议OP确实可以确定其当前浏览器支持svg的功能

在此留下我不正确的（针对此问题）和最终不必要的d3.js示例，以证明我愿意在错了并且完全误读了一个问题时才接受它。

let myCircles = [
   { "x_axis": 30, "y_axis": 30, "radius": 20, "color" : "green" },
   { "x_axis": 70, "y_axis": 70, "radius": 20, "color" : "purple"},
   { "x_axis": 110, "y_axis": 100, "radius": 20, "color" : "red"}];



function onresize()
{
    clear();
   let circles = d3.select("svg")
     .selectAll("circle")
     .data(myCircles).enter()
     .append("circle");

   let attributes = circles
     .attr("cx", function (d) { return d.x_axis; })
     .attr("cy", function (d) { return d.y_axis; })
     .attr("r", function (d) { return d.radius; })
     .attr("id", function(d, i){ return 'c' + i; })  
     .attr('onclick',function(d, i){ return 'c' + i; })   
     .style("fill", function(d) { return d.color; });  
}

onresize()

为清晰起见

可以说这是D3: How delete shape on click event?的副本

但是我认为，被投票赞成的答案会以非d3规范的方式迭代项目名称。

属性中的回调是第一个输入是“数据”，第二个输入是位置索引，与使用外部声明的变量进行设置相比，位置索引更忠实于d3的设计。 .attr（'onclick'，function（d，i）{return'c'+ i;}）

SVG元素在Chrome中没有收到onclick

2 个答案: