I'm creating an interactive map using dc.js and d3.js. The map should support zooming and panning, so I'm using the d3.zoom behavior. I also want a function to run when I click areas on the map. The code works as expected in Firefox (Linux and Windows), IE, and Chrome (Linux), but Chrome version 47 on Windows interprets the clicks as attempts to zoom, which suppresses the click events. Is there any way to avoid this?

I created a simplified [jsfiddle](https://jsfiddle.net/rjmorris/gaysnspy/) to demonstrate the issue. The code is below:

**HTML**

```
<div id="container"></div>

```

**JS**

```
var container = d3.select('#container');
var fmt = d3.format('.2f');

var svg = container.append('svg')
    .attr('width', 400)
    .attr('height', 400)
    .append('g');

var colors = ['#444488', '#448844', '#884444'];

svg.selectAll('circle')
    .data(colors)
    .enter()
    .append('circle')
    .attr('cx', function(d, i) { return 50 + 100*i; })
    .attr('cy', function(d, i) { return 50 + 100*i; })
    .attr('r', function(d, i) { return 10 + 10*i; })
    .style('fill', function(d) { return d; })
    .on('click', function(d, i) {
        // Skip the click handler if preventDefault was called. This prevents the click
        // handler from running at the end of a drag.
        if (!d3.event.defaultPrevented) {
            console.log('clicked circle #' + i);
        }
    });

var zoomBehavior = d3.behavior.zoom()
    .scale(1)
    .scaleExtent([1, 15])
    .translate([0, 0])
    .on('zoom', function() {
        console.log('got zoom: scale = ' + fmt(d3.event.scale) + ', translate = [' + fmt(d3.event.translate[0]) + ',' + fmt(d3.event.translate[1]) + ']');
        svg.attr("transform", "translate(" + d3.event.translate + ") scale(" + d3.event.scale + ")");
    });

container.call(zoomBehavior);

```

The demo adds three circles to the SVG and gives each one a click handler. It also adds the d3.zoom behavior to the container element. I want it to do the following:

* Clicking a circle runs the cirlce's click handler.
* Using the mousewheel zooms in and out, whether the mouse is over a circle or the background.
* Clicking and dragging pans the area, whether the click/drag starts over a circle or over the background. If it starts over a circle, the circle's click handler shouldn't be run.

All these requirements are met by the demo in Firefox and IE. In Chrome, when I click a circle, the zoom handler runs instead of the click handler. Does anyone have suggestions for how to deal with this?

As another approach, I tried putting a rectangle either above or below the rest of the SVG elements and attaching the zoom behavior to the rectangle instead of the container, but I ran into various issues with events not reaching the correct element. I'm willing to explore that further if people think that's the way to go.