使用 d3 拖动时如何禁用 mouseover 和 mouseout 事件？答案

【问题标题】：How to disable mouseover and mouseout event while dragging with d3?使用 d3 拖动时如何禁用 mouseover 和 mouseout 事件？
【发布时间】：2017-06-01 23:43:16
【问题描述】：

我有一堆 svg 圆圈，它们在悬停时显示工具提示，并且可以在画布上拖动。对于mouseover 和mouseout 和dragstart 和dragend，我正在计时要记录的事件。

但是，当一个圆圈被拖动时，我不希望它继续触发要记录的鼠标悬停事件——理想情况下，我希望工具提示继续显示，但不为鼠标悬停事件生成日志如果它也被拖动。

我尝试了几种方法来尝试禁用 mouseover 事件并在 dragstart 和 dragend 上重新启用它，包括 $(this).on('mouseover', function() { return false; }); 和 $(this).on('mouseover', mouseover); 以及尝试取消绑定和重新绑定 mouseover 事件。代码如下。

// 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 --
}

有什么想法可以实现吗？鼠标悬停功能中是否有一种方法可以检查该元素是否也被拖动？

【问题讨论】：

标签： javascript d3.js mouseover drag

【解决方案1】：

只需在外部范围内用变量标记拖动：

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 --
}

【讨论】：