index.html

## index.html
<!DOCTYPE html>
<html>
<head>
  <script src="http://d3js.org/d3.v3.min.js"></script>
  <style>
    body { margin:0; padding:0; }
    #map { width:960px; height:500px; background:cyan; }
  </style>
</head>
<body>
<div id='map'></div>
<script>
function clickcancel() {
    var event = d3.dispatch('click', 'dblclick');
    function cc(selection) {
        var down,
            tolerance = 5,
            last,
            wait = null;
        // euclidean distance
        function dist(a, b) {
            return Math.sqrt(Math.pow(a[0] - b[0], 2), Math.pow(a[1] - b[1], 2));
        }
        selection.on('mousedown', function() {
            down = d3.mouse(document.body);
            last = +new Date();
        });
        selection.on('mouseup', function() {
            if (dist(down, d3.mouse(document.body)) > tolerance) {
                return;
            } else {
                if (wait) {
                    window.clearTimeout(wait);
                    wait = null;
                    event.dblclick(d3.event);
                } else {
                    wait = window.setTimeout((function(e) {
                        return function() {
                            event.click(e);
                            wait = null;
                        };
                    })(d3.event), 300);
                }
            }
        });
    };
    return d3.rebind(cc, event, 'on');
}
var cc = clickcancel();
d3.select('#map').call(cc);
cc.on('click', function() {
    d3.select('#map').text(d3.select('#map').text() + 'click, ');
});
cc.on('dblclick', function() {
    d3.select('#map').text(d3.select('#map').text() + 'dblclick, ');
});
</script>
</body>
</html>