D3 Click + Drag Events

... working together in harmony. Unfortunately the extra variable is needed.

HTML

<svg></svg>

JavaScript

var container,
    rect,
    dragBehavior;

svg = d3.select('svg');
container = svg.append('g');

svg.attr("width", 500).attr("height", 300);

rect = container.append('rect')
    .attr('width', 100)
    .attr('height', 100);

dragBehavior = d3.behavior.drag()
    .on('dragend', onDragStart)
    .on('drag', onDrag)
    .on('dragend', onDragEnd);

rect
    .call(dragBehavior)
    .on('click', onClick);

function flashRect() {
    rect.attr('fill', 'red').transition().attr('fill', 'black');
}

function onDragStart() {
    console.log('onDragStart');
}

function onDrag() {
    console.log('onDrag');
    var x = (d3.event.sourceEvent.pageX - 50);
    container.attr('transform', 'translate(' + x + ')');
}

function onDragEnd() {
        console.log('onDragEnd');
}

function onClick() {
    if (d3.event.defaultPrevented === false) {
        console.log('onClick');
        // only do this on click if we didn't just finish dragging
        flashRect();
    } else {
		console.log("default prevented");
	}
}