How to disable mouseover and mouseout event while dragging with d3?

Question

I have a bunch of svg circles that display tooltips on hover and can be dragged around the canvas. For mouseover and mouseout and dragstart and dragend, I am timing the event to be logged.

However, when a circle is being dragged, I don't want it to keep triggering mouseover events to be logged -- ideally, I'd like the tooltip to continue to display, but not generate the log for the mouseover event if it is also being dragged.

I've tried several things to try to disable the mouseover event and re-enable it on dragstart and dragend, including $(this).on('mouseover', function() { return false; }); and $(this).on('mouseover', mouseover); as well as trying to unbind and re-bind the mouseover event. Code is below.

// define drag behavior
drag = d3.behavior.drag()
    .origin(function(d) { return {x: d['x'], y: d['y']}; })
    .on('dragstart', function(d) {
        dragStart = new Date(); 
    }).on('drag', dragged)
    .on('dragend', function(d) {
        dragEnd = new Date(); 
        // units are seconds
        var elapsedTime = (dragEnd - dragStart) / 1000;
        console.log("elapsed drag time: " + elapsedTime);
        // TODO: generate the log of the drag ---
    });

// create circles
var circles = svg
    .selectAll('circle')
    .data(data)
    .enter().append('circle')
    .attr('class', 'circle')
    .attr('cx', function(d) { return d['x']; })
    .attr('cy', function(d) { return d['y']; })
    .attr('r', radius)
    .classed('unsorted', true)
    .call(drag)
    .on('click', clicked)
    .on('mouseover', mouseover)
    .on('mouseout', mouseout);

// define mouseover behavior
function mouseover(d) {
    mouseoverStart = new Date();
    tip.show(d);
}

// define mouseout behavior
function mouseout(d) {
    tip.hide(d);
    mouseoverEnd = new Date();
    // units are seconds
    var elapsedTime = (mouseoverEnd - mouseoverStart) / 1000;
    console.log("elapsed mouseover time: " + elapsedTime);
    // TODO: generate the log of the mouseover --
}

Any ideas how I can achieve this? Is there a way within the mouseover function that I can check if that element is also being dragged?

Answer 1

Just flag the drag with a variable in the outer scope:

var isDragging = false; 
drag = d3.behavior.drag()
    .origin(function(d) { return {x: d['x'], y: d['y']}; })
    .on('dragstart', function(d) {
        isDragging = true;
        dragStart = new Date(); 
    }).on('drag', dragged)
    .on('dragend', function(d) {
        dragEnd = new Date(); 
        // units are seconds
        var elapsedTime = (dragEnd - dragStart) / 1000;
        console.log("elapsed drag time: " + elapsedTime);
        // TODO: generate the log of the drag ---
        isDragging = false;
    });

function mouseout(d) {
    tip.hide(d);
    mouseoverEnd = new Date();
    // units are seconds
    var elapsedTime = (mouseoverEnd - mouseoverStart) / 1000;
    if (!isDragging) console.log("elapsed mouseover time: " + elapsedTime);
    // TODO: generate the log of the mouseover --
}