Question

我有一张地图，并且在每个路径中我都有一个on("click")事件，只有在我点击path时才会激活此事件，但在drag结束时会激活它事件结束。只有在我点击path？

时才能激活点击事件

这是我的代码：

      g.selectAll(".mpio")
        .data(topojson.feature(co, co.objects.mpios).features)
        .enter().append("path")
        .attr("class", function(d) {
          return "mpio " + "_" + d.id + " " + d.properties.dpt
        })
        .attr("d", path)
        .on("click",function(){
        alert("click")
        })
    })

这是我的原始代码（原始问题）

   g.selectAll('path')
    .data(features)
    .enter().append('path')
    .classed('map-layer', true)
    .attr('d', path)
    .attr('colorOriginal', fillFn)
    .attr('departamento', function(d){
      return d.properties.NOMBRE_DPT;
    })
    .attr('idDepartamento', function(d){
      return d.properties.DPTO;
    })
    .attr('vector-effect', 'non-scaling-stroke')
    .style('fill', fillFn)
    /*.on('mouseover', mouseover)
    .on('mouseout', mouseout)*/
    .on('click', function(d){
      d3.select("#nombredepto").text(nameFn(d));
      d3.selectAll("path").style("stroke",function(){
        d3.select(this).transition().ease("linear").duration(500).style("fill",d3.select(this).attr("colorOriginal"))
      })
      d3.select(this).transition().ease("linear").duration(500).style("fill","#2e3c61");

      $scope.select_deptos={ "DPTO": d.properties.DPTO, "NOMBRE_DPT": d.properties.NOMBRE_DPT};
      $scope.sendFiltros.departamento=$scope.select_deptos.DPTO;
      $scope.aFiltros.departamento=[$scope.select_deptos];
      $scope.fn_mapa();

    })

http://jsfiddle.net/dkn5Lw97/

Answer 1

从this example，您可以在点击事件中添加if (d3.event.defaultPrevented) return;，以防止在发生缩放时发生这种情况。

.on("click",function(){
  if (d3.event.defaultPrevented) return;
    alert("CLICKED!!")
  })

Here is an implementation，来自你的小提琴。

Answer 2

查看onmousedown和onmouseup以获得更多控制权。

click完全完成了这两个事件（鼠标按下，然后鼠标按下）。我认为你甚至都在寻找鼠标。

当我进行拖动时，如何防止启动（＆＃34;点击＆＃34;）事件？

2 个答案: