I am using d3 to build a simple chart that the user can edit interactively with the mouse.

It works on in all modern common browser (Chrome, Firefox, Safari), except for Internet Explorer 9 where I can start to drag an item but I never get the mouseup event.

The strangest bit is that, if I open the debugger, the page works percetly on Internet Explorer 9 as well.

My code looks like this:

item.append("svg:circle")
    .attr("class", "handle")
    .attr("opacity",0.5)
    .attr("stroke","gray")
    .attr("cx", bx(0.5)-bx(0))
    .attr("r", 10)
    .style("cursor", "crosshair")
    .style("pointer-events", "all")
    .call(d3.behavior.drag()
        .on("dragstart", function() {
            dragTarget = d3.select(this);
        })
        .on("drag", function() {
            this.parentNode.appendChild(this); // put us on the front, not really needed
            var dragTarget = d3.select(this);
            dragTarget
                .attr("cy", function() { return d3.event.dy + parseInt(dragTarget.attr("cy"))});
        })
        .on("dragend", function(d, i) {
            newY = parseInt(d3.select(this).attr("cy"));
            newValue = y.invert(newY);
            var serieNo = this.__data__.serieNo;

            console.log([serieNo+1,i+1]);
            data[serieNo+1][i+1] = newValue;
            updateBarChart();
            onchange();
        })
    );