CODEWITHSUNDEEP
javascriptd3.jsevent-handlingdom-eventsevent-bubbling
Patryk
Patryk

Reputation: 24092

How to prevent triggering mouseleave after mouseup?

In my Javascript app I am having issues with event bubbling, namely I would like not to trigger mouseleave after mouse up on an element (have implemented dragging behavior therefore it moves and mouse leaves it).

How can I do that ?

EDIT

I am using d3.js to capture event in the following way : 

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

Upvotes: 1

Views: 809

Answers (2)

Patryk
Patryk

Reputation: 24092

I have solved it in similar way to user1671639's adivice with boolean check : 

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 )
    {
    ...
    }
})

EDIT

Is there any more elegant way to do this ?

Upvotes: 0

Praveen
Praveen

Reputation: 56511

How about having a boolean check variable like this

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) {         
        ...
          }
        }

Instead of using mouseover and mouseleave, I would prefer to use .hover() with callback

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

Upvotes: 1

Related Questions