如何防止mouseup后触发mouseleave？答案

【问题标题】：How to prevent triggering mouseleave after mouseup?如何防止mouseup后触发mouseleave？
【发布时间】：2013-09-03 13:53:33
【问题描述】：

在我的 Javascript 应用程序中，我遇到了事件冒泡问题，即我不想在鼠标悬停在一个元素上之后触发 mouseleave（已实现拖动行为，因此它会移动并且鼠标离开它）。

我该怎么做？

编辑

我正在使用d3.js 通过以下方式捕获事件：

d3.selectAll("circle")
        .on("mouseover", function(d,i){
        ...
        }
        .on("mouseup", function(d,i){
        ...
        }
        .on("mouseleave", function(d,i){
        ...
        }

【问题讨论】：

您是否在使用任何库，您有正在使用的代码示例吗？了解这些都很有帮助。
var dragging = false; function mouseLeave(e){ if (dragging) return; ... }?
@ars265 我已在我的编辑中添加了此信息。

标签： javascript d3.js event-handling dom-events event-bubbling

【解决方案1】：

有一个像这样的布尔check变量怎么样

var preventBubble = true;
d3.selectAll("circle")
        .on("mouseover", function(d,i){
        ...
        }
        .on("mouseup", function(d,i){
        preventBubble = false;
        ....
        }
        .on("mouseleave", function(d,i){

        if(preventBubble) {         
        ...
          }
        }

比起使用mouseover 和mouseleave，我更愿意使用带有回调的.hover()

d3.selectAll("circle").on("hover", function(d,i){
    //To Dos
  }, function(d,i) {
    // callback To Dos
});

【讨论】：

【解决方案2】：

我已经以类似于 user1671639 的布尔检查的方式解决了它：

var been_in_mouseup = false;

.on("mousedown", function(d){
    ...
    been_in_mouseup = false;
})
.on("mouseup", function(d,i){
    ...
    been_in_mouseup = true;
})
.on("mouseleave", function(d, i){
    ...
    if(false == been_in_mouseup )
    {
    ...
    }
})

编辑

有没有更优雅的方法来做到这一点？

【讨论】：