javascript - 当我点击一个圆圈时触发点击

Question

我正在尝试单击一个圆圈并接收我单击的元素。但我无法执行这个触发器。我该如何修复它？

https://plnkr.co/edit/keLfbZ13wz8h9nMHp8pN?p=preview

var coordenadas=map.latLngToLayerPoint([coordinates[0].lat,coordinates[0].long]);
svg.append('circle').attr("cx",coordenadas.x)
.attr("cy", coordenadas.y)
.attr("r", 30)
.style("fill",'red')
.attr("class",'circulo_mapa')
.on("click", function(element){
   console.log('this is the element', element);
   alert("click")
})

Answer 1

我forked your plunk添加两件事:

• 使圆圈 react 拦截指针事件
• 在点击回调中记录 this 而不是 element(这是您可能想要选择的内容)

这是更新的方法:

var coordenadas = map.latLngToLayerPoint([coordinates[0].lat,coordinates[0].long]);

//add circle on map
        var coordenadas=map.latLngToLayerPoint([coordinates[0].lat,coordinates[0].long]);
        svg.selectAll('circle').data(new Array(3))
            .enter()
            .append('circle')
            .attr("cx",function(d,i){return coordenadas.x+i*10})
            .attr("cy", function(d,i){return coordenadas.y+i*20})
            .attr("r", 30)
            .style("fill",'red')
            .style('stroke', 'black')
            .style('pointer-events', 'all')
            .style('cursor', 'pointer')
            .attr("class",'circulo_mapa')
            .on("click", function(d,i){
              console.log('this is the element', this);
              alert("click on " + i)
            })