CODEWITHSUNDEEP
javascriptd3.js
yavg
yavg

Reputation: 3051

How to prevent the on ("click") event from activating when I'm doing drag?

I have a map and in each path I have an on("click") event, this should be activated only when I click on a path, but it is activated at the end when the drag event ends. How can I make the click event activate, only when I click on a path?

this is my code:

      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")
        })
    })

this is my original code(problem original)

   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/

Upvotes: 0

Views: 50

Answers (2)

pmkro
pmkro

Reputation: 2550

From this example, you can add if (d3.event.defaultPrevented) return; into your click event to prevent it from happening when a zoom is happening.

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

Here is an implementation, from your fiddle.

Upvotes: 1

Kalob Porter
Kalob Porter

Reputation: 440

check out onmousedown and onmouseup to have a little more control.

A click is a full completion of both of these events (mouse down, then mouse up). I think you're looking for the mouse down even.

Upvotes: 0

Related Questions