CODEWITHSUNDEEP
jquerytriggersd3.jsmouseoutmouseleave
Philip Rau
Philip Rau

Reputation: 51

Both mouseleave and mouseout triggering too often

Relatively new coder here. I'm using D3 and jquery to create a hopup effect that triggers when the cursor moves over an svg circle.

An example of a circle looks like this:

<circle cx="20.61855670103093" cy="730" class="top1000 Ragtime albumDot" id="0" r="5.5"></circle>

The CSS that affects the circles is this:

.albumDot {
  fill: #fff;
  z-index: 250;
  cursor: pointer; /*-- Does not work 90% of the time --*/
  stroke: #111;
  stroke-width: 3px;
  opacity: 1;
}

The code that handles the hover looks like this:

$('.albumDot').mouseenter(function() {
   console.log("mouseover"+ this.id); 
   hopup(jazzdata[this.id]);      
});
$(".albumDot").mouseleave( function() {
   console.log("mouseout"); 
   d3.select("#hopup").attr("style","display:none; opacity:0;");
}

The hover function works just fine, but as I move the mouse over any of these svg shapes, mouseenter and mouseleave trigger over and over again. I am not leaving the shape, just moving within it.

Previously, I had been using mouseover and mouseoff, but I had the same problem. The circles have no child elements.

This happens in Safari and Chrome on a Mac.

EDIT: Here is a live example on dropbox.

http://dl.dropbox.com/u/2272508/jazz_history/index.html

Upvotes: 5

Views: 2484

Answers (1)

meetamit
meetamit

Reputation: 25177

In the DOM, you have an element <svg id="HopupTriangle">, which seems to be not in use. This element is appearing on top of the dot as soon as the hopup appears, and it steals the focus from the mouse. Simply giving it display:none fixes the issue. So, if you don't need it, get rid of it.

If you do need it – and I'm guessing you're planning to put an arrowhead in it – you need to ensure it never overlaps the dot. Start by giving this element a background-color:#f00 so that you can clearly see its positioning, and then adjust its height an position.

Finally, if this element has to overlap the dot, then add to it a CSS property pointer-events:none, which will cause the browser to ignore its mouse events. Unfortunately, this property doesn't work in IE though, and AFAIK there is no simple workaround for this issue – other than gracefully degrading by always hiding this element for IE browsers.

Upvotes: 4

Related Questions