mnehrig/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>
	<!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>